<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.27">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"><script src="https://at.alicdn.com/t/font_2849934_v6y652peian.js"></script><link href="https://gitee.com/ran_yong/mark-down-table-upload/raw/master/img/20211123222242.png" rel="icon"><link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2970797_5eiedcvhf0a.css"><title>Vue_shop 项目实战 | Sakura</title><meta name="description" content="">
    <link rel="preload" href="/assets/js/runtime~app.5b846f34.js" as="script"><link rel="preload" href="/assets/css/styles.f5148030.css" as="style"><link rel="preload" href="/assets/js/452.9ec739fe.js" as="script"><link rel="preload" href="/assets/js/app.05eaf2e4.js" as="script">
    <link rel="stylesheet" href="/assets/css/styles.f5148030.css">
  </head>
  <body>
    <div id="app"><!--[--><!--[--><div class="common" style="--borderRadius:10px;--opacity:1;--fontColor:#2c3e50;--fontFamily:-apple-system;--fitter-blue:1px;"><header style="--borderRadius:10px;--opacity:1;--fontColor:#2c3e50;--fontFamily:-apple-system;--fitter-blue:1px;" class="header-bg-show navbar" id="c-navbar"><div class="toggle-sidebar-button"><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><span><a href="/" class=""><img style="border-radius:30px;" class="logo" src="https://gitee.com/ran_yong/mark-down-table-upload/raw/master/img/20211123222242.png" alt="Sakura"><span class="site-name" style="color: #2c3e50;">Sakura</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><!--[--><span class="aurora-nav-font aurora-navbar-icon"></span><a aria-current="page" href="/Front-end/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98.html#" class="router-link-active router-link-exact-active nav-link nav-link-active" aria-label="面经">面经</a><!--]--></div><div class="navbar-links-item"><div class="dropdown-wrapper"><span class="sakura-html aurora-nav-font aurora-navbar-icon"></span><button class="dropdown-title" type="button" aria-label="前端"><span class="title">前端</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="前端"><span class="title">前端</span><span class="right arrow"></span></button><ul style="display:none;" id="c-nav-dropdown" class="nav-dropdown"><!--[--><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>JavaScript</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Front-end/JavaScript%E8%AF%AD%E6%B3%95%E5%AD%A6%E4%B9%A0.html" class="nav-link" aria-label="JavaScript语言">JavaScript语言</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>TypeScript</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Front-end/TypeScript%E8%AF%AD%E6%B3%95%E5%AD%A6%E4%B9%A0.html" class="nav-link" aria-label="TS语法学习">TS语法学习</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Vue项目实战</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a aria-current="page" href="/Front-end/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98.html" class="router-link-active router-link-exact-active nav-link" aria-label="Vue_shop 项目实战">Vue_shop 项目实战</a><!--]--></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><span class="sakura-houduankaifa aurora-nav-font aurora-navbar-icon"></span><button class="dropdown-title" type="button" aria-label="后端"><span class="title">后端</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="后端"><span class="title">后端</span><span class="right arrow"></span></button><ul style="display:none;" id="c-nav-dropdown" class="nav-dropdown"><!--[--><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Fastapi</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Back-end/Fastapi.html" class="nav-link" aria-label="Fastapi学习">Fastapi学习</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Python基础</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Back-end/python%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0.html" class="nav-link" aria-label="python基础学习">python基础学习</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Go基础</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Back-end/Go%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0.html" class="nav-link" aria-label="Go基础学习">Go基础学习</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>SQL基础</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Back-end/SQL%E5%9F%BA%E7%A1%80%E5%AD%A6%E4%B9%A0.html" class="nav-link" aria-label="SQL基础学习">SQL基础学习</a><!--]--></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><span class="sakura-service aurora-nav-font aurora-navbar-icon"></span><button class="dropdown-title" type="button" aria-label="服务端"><span class="title">服务端</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="服务端"><span class="title">服务端</span><span class="right arrow"></span></button><ul style="display:none;" id="c-nav-dropdown" class="nav-dropdown"><!--[--><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>宝塔面板</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Other/WebHook.html" class="nav-link" aria-label="宝塔面板自动同步gitee仓库代码">宝塔面板自动同步gitee仓库代码</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>配置公钥</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Other/%E9%85%8D%E7%BD%AEgitee%E3%80%81github%E5%85%AC%E9%92%A5.html" class="nav-link" aria-label="配置gitee、github公钥">配置gitee、github公钥</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>宝塔配置HTTPS</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Other/%E5%AE%9D%E5%A1%94%E9%85%8D%E7%BD%AEHTTPS.html" class="nav-link" aria-label="如何通过宝塔配置HTTPS网站">如何通过宝塔配置HTTPS网站</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Node后台运行</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Other/%E5%9C%A8linux%E4%B8%AD%E6%8C%81%E7%BB%AD%E8%BF%90%E8%A1%8CNode.js%E6%96%87%E4%BB%B6.html" class="nav-link" aria-label="在linux中持续运行Node.js文件">在linux中持续运行Node.js文件</a><!--]--></li><!--]--></ul><!--]--></li><li class="dropdown-item"><!--[--><h4 class="dropdown-subtitle"><span>Mac安装Scrcpy投屏软件</span></h4><ul class="dropdown-subitem-wrapper"><!--[--><li class="dropdown-subitem"><!--[--><!----><a href="/Other/Mac%E5%AE%89%E8%A3%85scrcpy%E6%8A%95%E5%B1%8F%E8%BD%AF%E4%BB%B6.html" class="nav-link" aria-label="Mac M1芯 安装scrcpy投屏软件">Mac M1芯 安装scrcpy投屏软件</a><!--]--></li><!--]--></ul><!--]--></li><!--]--></ul></div></div><div class="navbar-links-item"><!--[--><span class="sakura-shijianzhou aurora-nav-font aurora-navbar-icon"></span><a href="/aurora-archive/" class="nav-link nav-link-active" aria-label="时间轴">时间轴</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-guanyuwomen aurora-nav-font aurora-navbar-icon"></span><a href="/about" class="nav-link nav-link-active" aria-label="关于我">关于我</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-youlianguanli aurora-nav-font aurora-navbar-icon"></span><a href="/link" class="nav-link nav-link-active" aria-label="友链">友链</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-biaoqian aurora-nav-font aurora-navbar-icon"></span><a href="/tag" class="nav-link nav-link-active" aria-label="标签">标签</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-41shuoshuo aurora-nav-font aurora-navbar-icon"></span><a href="/mood" class="nav-link nav-link-active" aria-label="说说">说说</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-xiangce aurora-nav-font aurora-navbar-icon"></span><a href="/photo" class="nav-link nav-link-active" aria-label="相册">相册</a><!--]--></div><div class="navbar-links-item"><!--[--><span class="sakura-github aurora-nav-font aurora-navbar-icon"></span><a class="nav-link external nav-link-active" href="https://github.com/ranyong1997/sakura-docs" rel="noopener noreferrer" target="_blank" aria-label="Sakura"><!--[--><!--]--> Sakura<!--[--><!--]--></a><!--]--></div><!--]--></nav><!--[--><!--]--><!----><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--[--><div id="" class="mobile-sidebar-control"></div><div id="" class="mobileAnimate mobile-sidebar"><!----></div><!--]--><div class="setColor" style="--borderRadius:10px;--fontFamily:-apple-system;--fontColor:#2c3e50;"><div id="setIco" class="setIco bg_color"></div><div class="welcome-parent" id="welcome-parent"><div class="custom-about m-4 p-4 f4 color-shadow-small bg-gray-800-mktg rounded-2 signup-content-container welcome" style="display: none;" id="welcome"><span class="cancel aurora-iconfont-common aurora-style-cancel" id="cancel"></span><h1 class="common-style" id="sr-only-h2"></h1><div class="custom-top custom-common"><div class="custom-top-span custom-common-span"><span class="aurora-iconfont-common aurora-style-img home-welcome-custom-icon"></span>  </div><div class="custom-top-span custom-common-span"><span class="aurora-iconfont-common aurora-style-blur home-welcome-custom-icon"></span>  </div></div><div class="custom-bottom custom-common"><div style="flex:1;" class="custom-bottom-span custom-common-span"><!--[--><li class="custom-li"><span style="background-color: #2c3e50;" data-color="#2c3e50"></span></li><li class="custom-li"><span style="background-color: #42a5f5;" data-color="#42a5f5"></span></li><li class="custom-li"><span style="background-color: #8093f1;" data-color="#8093f1"></span></li><li class="custom-li"><span style="background-color: #FF6EC7;" data-color="#FF6EC7"></span></li><li class="custom-li"><span style="background-color: #FF7F00;" data-color="#FF7F00"></span></li><li class="custom-li"><span style="background-color: #8FBC8F;" data-color="#8FBC8F"></span></li><li class="custom-li"><span style="background-color: #EAADEA;" data-color="#EAADEA"></span></li><li class="custom-li"><span style="background-color: #3299CC;" data-color="#3299CC"></span></li><!--]--></div></div><div class="custom-bottom custom-common"><div style="flex:1;" class="custom-bottom-span custom-common-span"><!--[--><li class="custom-li"><span style="font-family: -apple-system;" data-color="-apple-system">冉</span></li><li class="custom-li"><span style="font-family: hlt;" data-color="hlt">冉</span></li><li class="custom-li"><span style="font-family: tzt;" data-color="tzt">冉</span></li><li class="custom-li"><span style="font-family: sst;" data-color="sst">冉</span></li><li class="custom-li"><span style="font-family: lf;" data-color="lf">冉</span></li><li class="custom-li"><span style="font-family: xsf;" data-color="xsf">冉</span></li><li class="custom-li"><span style="font-family: lsf;" data-color="lsf">冉</span></li><li class="custom-li"><span style="font-family: cgt;" data-color="cgt">冉</span></li><!--]--></div></div><div class="custom-bottom custom-common"><div class="custom-bottom-span custom-common-span"> 圆角 </div><div style="flex:3;" class="custom-bottom-span custom-common-span"><div class="input-range"><div class="input-left"><input autocomplete min="1" max="40" value="10" step="1" type="range"></div><div class="input-right">10</div></div></div></div><div class="custom-bottom custom-common"><div class="custom-bottom-span custom-common-span"> 透明度 </div><div style="flex:3;" class="custom-bottom-span custom-common-span"><div class="input-range"><div class="input-left"><input autocomplete min="0" max="1" value="1" step="0.01" type="range"></div><div class="input-right">1</div></div></div></div></div></div></div><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><div style="--fontColor: #2c3e50; --fontFamily: -apple-system;" class="sidebar-single-enter-animate theme-container"><div class="page-sidebar"><div class="sidebar-single-enter-animate page-top" id="page-top" show-mood-edit="false"><div class="top-mask" style="background-image: url(https://api.ixiaowai.cn/api/api.php?time=-48185);"></div><div class="aurora-top-bubble"><div class="aurora-top-bubble-par"><div class="aurora-top-bubble-box" id="aurora-top-bubble-box"></div><canvas class="aurora-top-bubble-canvas" id="aurora-top-bubble-canvas"></canvas></div></div><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><div class="page-record-control"><div class="page-top-record" id="page-top-record"><div class="page-record-bot-common page-record-top"><div class="page-record-top-left page-record-single-common"><span class="aurora-iconfont-common aurora-page-word"></span>  <span class="page-record-single-desc">总字数</span><span>0</span></div><div class="page-record-top-right page-record-single-common"><span class="aurora-iconfont-common aurora-page-time"></span>  <span class="page-record-single-desc">时长</span><span>0</span></div></div><div class="page-record-bot-common page-record-center"><div class="page-record-center-left page-record-single-common"><span class="aurora-iconfont-common aurora-page-comment"></span>  <span class="page-record-single-desc">评论数</span><span id="/Front-end/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98.html" class="waline-comment-count"></span></div><div class="page-record-center-right page-record-single-common"><span class="aurora-iconfont-common aurora-page-read"></span>  <span class="page-record-single-desc">总阅读数</span><span id="/Front-end/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98.html" class="waline-visitor-count"></span></div></div><!----></div></div><div class="top-image" id="top-image"><h1></h1></div></div><div class="content"><div id="article-page-parent" class="article-page-parent-pro article-page-parent"><div class="noShowSidebar page-sidebar-left" id="page-sidebar-left"><!--[--><!--]--><!--[--><!--[--><main style="--borderRadius: 10px;--opacity: 1;" class="page sidebar-single-enter-animate" id="article-page"><!--[--><!--]--><div id="theme-default-content" class="hide-h1-tag theme-default-content pageContent medium-zoom-content"><div class="page-top-share"><div class="page-top-share-next"><div class="poster-share" style="z-index:99;"><div class="poster-button" id="poster-button"><span class="aurora-iconfont-common aurora-poster-ico" data="4">生成海报3</span>  </div></div></div></div><!--[--><h1 id="vue-shop-项目实战" tabindex="-1"><a class="header-anchor" href="#vue-shop-项目实战" aria-hidden="true">#</a> Vue_shop 项目实战</h1><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632035001388-2508ebe1-27ec-4bfc-8d51-0964fc1de9d4.png" data="aurora"> 电商后台管理系统 项目源码：<a href="https://gitee.com/ran_yong/vue_shop" target="_blank" rel="noopener noreferrer">码云<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a> 微信号：RanY_Luck</p><h2 id="_1、前端项目的技术栈" tabindex="-1"><a class="header-anchor" href="#_1、前端项目的技术栈" aria-hidden="true">#</a> 1、前端项目的技术栈</h2><ul><li>vue</li><li>vue-router</li><li>Element-UI</li><li>Axios</li><li>Echarts</li></ul><h2 id="_2、后端项目技术栈" tabindex="-1"><a class="header-anchor" href="#_2、后端项目技术栈" aria-hidden="true">#</a> 2、后端项目技术栈</h2><ul><li>Node.js</li><li>Express</li><li>Jwt</li><li>Mysql</li><li>sequelize</li></ul><h2 id="项目前端初始化" tabindex="-1"><a class="header-anchor" href="#项目前端初始化" aria-hidden="true">#</a> 项目前端初始化</h2><ol><li>安装Vue脚手架</li><li>通过Vue脚手架创建项目</li><li>配置Vue路由</li><li>配置Element—UI组件库</li><li>配置Axios库</li><li>初始化git远程仓库</li><li>将本地项目托管到github或码云中</li></ol><h2 id="_1、安装vue脚手架" tabindex="-1"><a class="header-anchor" href="#_1、安装vue脚手架" aria-hidden="true">#</a> 1、安装Vue脚手架</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>npm install -g @vue/cli
</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><h2 id="_2-、通过vue脚手架创建项目-通过可视化创建" tabindex="-1"><a class="header-anchor" href="#_2-、通过vue脚手架创建项目-通过可视化创建" aria-hidden="true">#</a> 2 、通过Vue脚手架创建项目(通过可视化创建)</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>vue ui
</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634063268-f13f3d5d-d8be-4c02-813a-11819650d9f1.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634113538-3aa8d278-5174-46bc-9dac-493bb3cd3510.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634199841-a4620db1-1ed7-4e93-a4cf-559b61cb8ff0.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634252781-f889f8b1-915e-40f1-9314-aaeea9723aef.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634391262-0695082f-03d1-483b-83f6-0fff9a5e5fc6.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634500874-8cfaf6d5-195c-409d-892d-ba0a5d1d9977.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634638414-c431e912-ea7f-4d15-98d4-43ffca9e1733.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634684805-f1d7d981-24ea-42f4-b62f-99fff5a67c2d.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634796184-060c5c6b-f183-4582-8aab-8569e74e1b8e.png" data="aurora"></p><h2 id="_3、安装element-ui" tabindex="-1"><a class="header-anchor" href="#_3、安装element-ui" aria-hidden="true">#</a> 3、安装Element-UI</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634840033-df74fb29-9dc3-4065-b33d-05461f849852.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634912970-723094d0-979e-41bc-93a7-39ca04661c6c.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630634998393-cf8a3889-f54e-48ba-b2be-160c09a6d432.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630635030641-ff962f8d-aa7c-4c61-83fc-e65ddd0f5b07.png" data="aurora"></p><h2 id="_4、配置axios库" tabindex="-1"><a class="header-anchor" href="#_4、配置axios库" aria-hidden="true">#</a> 4、配置Axios库</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630635140509-5b1a91f2-9c2b-464b-953e-2f57b12d7d69.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630635172850-f21aa563-71d7-4828-a3c5-afd048318422.png" data="aurora"></p><h2 id="_5、配置less、less-loader开发依赖" tabindex="-1"><a class="header-anchor" href="#_5、配置less、less-loader开发依赖" aria-hidden="true">#</a> 5、配置less、less-loader开发依赖</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631596486807-cb2321ec-0d9a-4e37-b394-afb2483ba0fe.png" data="aurora"></p><h2 id="项目所有依赖" tabindex="-1"><a class="header-anchor" href="#项目所有依赖" aria-hidden="true">#</a> 项目所有依赖</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631596540913-d4fd98fa-7eab-47d3-bd86-00ffa1d91ba8.png" data="aurora"><strong>启动服务并启动app</strong><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630668532359-1fa0d5e8-5174-4e2d-8568-efde0c3a79ad.png" data="aurora"> 你会看到这样的一个画面 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630668590263-27f29dfd-96e8-4a06-b474-cc8ee52d50c8.png" data="aurora"></p><h2 id="_5、将本地项目托管到码云中" tabindex="-1"><a class="header-anchor" href="#_5、将本地项目托管到码云中" aria-hidden="true">#</a> 5、将本地项目托管到<a href="https://gitee.com/" target="_blank" rel="noopener noreferrer">码云<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a>中</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630635968383-1c0e502e-a276-455a-b958-84c86eacadf6.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630636080658-2e3d9a02-8b69-48e2-86c6-e226df31933e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630636061389-35275e26-26d7-45ad-b4bf-40f21fa2fb0e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630636104195-11e397ee-1272-4dc0-b4ec-635a510eda23.png" data="aurora"> 测试一下： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630635897752-7478cb7f-5791-45ca-8ba6-b5c071f178bc.png" data="aurora"></p><h2 id="项目后端初始化" tabindex="-1"><a class="header-anchor" href="#项目后端初始化" aria-hidden="true">#</a> 项目后端初始化</h2><h2 id="_1、安装mysql数据库" tabindex="-1"><a class="header-anchor" href="#_1、安装mysql数据库" aria-hidden="true">#</a> 1、安装MySql数据库</h2><p>官网：https://www.mysql.com/</p><h2 id="_2、安装node-js环境" tabindex="-1"><a class="header-anchor" href="#_2、安装node-js环境" aria-hidden="true">#</a> 2、安装Node.js环境</h2><p>官网：<a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener noreferrer">https://nodejs.org/zh-cn/<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a></p><h2 id="_3、配置项目相关信息" tabindex="-1"><a class="header-anchor" href="#_3、配置项目相关信息" aria-hidden="true">#</a> 3、配置项目相关信息</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630655061019-e5939602-f1ce-4d22-ac63-4afcfc1a2e86.png" data="aurora"></p><h2 id="_4、启动项目" tabindex="-1"><a class="header-anchor" href="#_4、启动项目" aria-hidden="true">#</a> 4、启动项目</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>node app.js
</code></pre><div class="line-numbers"><span class="line-number">1</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630654909805-4c7c82f1-165c-49d1-9b1c-48a7aa9033b0.png" data="aurora"></p><h2 id="_5、使用postman测试后台项目接口是否正常" tabindex="-1"><a class="header-anchor" href="#_5、使用postman测试后台项目接口是否正常" aria-hidden="true">#</a> 5、使用Postman测试后台项目接口是否正常</h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630654920809-40b9cdd3-c74e-47a8-992a-40b6bafe3faf.png" data="aurora"></p><h2 id="登录-退出功能" tabindex="-1"><a class="header-anchor" href="#登录-退出功能" aria-hidden="true">#</a> 登录/退出功能</h2><h2 id="原理" tabindex="-1"><a class="header-anchor" href="#原理" aria-hidden="true">#</a> 原理</h2><h2 id="登录功能代码实现" tabindex="-1"><a class="header-anchor" href="#登录功能代码实现" aria-hidden="true">#</a> 登录功能代码实现</h2><p>通过Element-UI组件实现布局</p><ul><li>el-form</li><li>el-form-item</li><li>el-input</li><li>el-button</li><li>字体图标</li></ul><h2 id="代码解读" tabindex="-1"><a class="header-anchor" href="#代码解读" aria-hidden="true">#</a> 代码解读</h2><h3 id="main-js" tabindex="-1"><a class="header-anchor" href="#main-js" aria-hidden="true">#</a> main.js</h3><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630668904483-acae8e53-81aa-4c12-aac7-66c7903c62ad.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630669362484-557d9836-7693-4305-8276-776e3cc4507e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630669767541-7c1516e7-e0e3-40d5-a15e-398562ec6b50.png" data="aurora"> 删除views</p><h2 id="清空页面" tabindex="-1"><a class="header-anchor" href="#清空页面" aria-hidden="true">#</a> 清空页面</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 导入helloword</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;app&#39;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- style样式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630669483485-5e5392b8-35ac-41a6-8f68-b4cf4d1c6381.png" data="aurora"></p><h2 id="创建一个comments目录" tabindex="-1"><a class="header-anchor" href="#创建一个comments目录" aria-hidden="true">#</a> 创建一个comments目录</h2><h3 id="创建login-vue文件" tabindex="-1"><a class="header-anchor" href="#创建login-vue文件" aria-hidden="true">#</a> 创建Login.vue文件</h3><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login_container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 登录主体边框 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login_box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 头像区域 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>avater_box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>../assets/logo.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>头像logo<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token comment">&lt;!-- 登录表单区域 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form</span> <span class="token attr-name">:model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loginForm<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:rules</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rules<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loginFormRef<span class="token punctuation">&quot;</span></span> <span class="token attr-name">label-width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0px<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login_form<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 用户名 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>username<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span>
            <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loginForm.username<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入账号<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">prefix-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-RectangleCopy<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 密码 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">prop</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-input</span>
            <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>loginForm.password<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>请输入密码<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">prefix-icon</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>iconfont icon-RectangleCopy1<span class="token punctuation">&quot;</span></span>
            <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>password<span class="token punctuation">&quot;</span></span>
          <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-input</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 按钮区域 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-form-item</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btns<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>login<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>登录<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>info<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>resetLoginForm(<span class="token punctuation">&#39;</span>loginForm<span class="token punctuation">&#39;</span>)<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form-item</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      <span class="token comment">// 这是登录表单的数据绑定对象</span>
      loginForm<span class="token operator">:</span> <span class="token punctuation">{</span>
        username<span class="token operator">:</span> <span class="token string">&#39;admin&#39;</span><span class="token punctuation">,</span>
        password<span class="token operator">:</span> <span class="token string">&#39;123456&#39;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token comment">// 这是表单的验证规则对象</span>
      rules<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 验证用户名是否合法</span>
        username<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">&#39;请输入登录账号&#39;</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">&#39;长度在 3 到 10 个字符&#39;</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 验证密码是否合法</span>
        password<span class="token operator">:</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span> required<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">&#39;请输入登录密码&#39;</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> max<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> message<span class="token operator">:</span> <span class="token string">&#39;长度在 6 到 15 个字符&#39;</span><span class="token punctuation">,</span> trigger<span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 点击重置按钮,重置登录表单</span>
    <span class="token function">resetLoginForm</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 前提是先获取ref节点</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>loginFormRef<span class="token punctuation">.</span><span class="token function">resetFields</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">login</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 表单之前的预验证</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>loginFormRef<span class="token punctuation">.</span><span class="token function">validate</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token parameter">valid</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>valid<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> res <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$http<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&#39;login&#39;</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>loginForm<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>status <span class="token operator">!==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;登录失败! &#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$message<span class="token punctuation">.</span><span class="token function">success</span><span class="token punctuation">(</span><span class="token string">&#39;登录成功&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 1. 将登陆成功之后拿到后端返回的token值，保存到客服端也就是临时浏览器sessionStorage中</span>
        <span class="token comment">//  1.1 项目中出了登录之外的其他api接口，必须在登录之后才能访问</span>
        <span class="token comment">//  1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStorage中</span>
        <span class="token keyword">const</span> data <span class="token operator">=</span> res<span class="token punctuation">.</span>data<span class="token punctuation">.</span>token<span class="token punctuation">;</span>
        window<span class="token punctuation">.</span>sessionStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">&#39;token&#39;</span><span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// 2. 通过编程式导航跳转到后台主页，路由地址是 /home</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;/home&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span>
.login_container {
  background: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute; // 绝对定位
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 在横轴上进行位移-50%,纵轴上位移-50%
  // 语法嵌套
  .avater_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee; // 边框
    border-radius: 50%; // 添加圆角边框
    padding: 10px; // 内边距
    box-shadow: 0 0 10px #ddd; // 添加阴影
    position: absolute; // 绝对定位
    left: 50%;
    transform: translate(-50%, -50%); // 在横轴上进行位移-50%,纵轴上位移-50%
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%; // 添加圆角边框
      background-color: #eee;
    }
  }
}
.btns {
  display: flex; // 弹性布局
  justify-content: flex-end; // 位于容器的结尾
}
.login_form {
  position: absolute; // 绝对定位
  bottom: 0; // 底部对齐
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box; // 将元素限制到宽度里面
}
&lt;/style
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br><span class="line-number">115</span><br><span class="line-number">116</span><br><span class="line-number">117</span><br><span class="line-number">118</span><br><span class="line-number">119</span><br><span class="line-number">120</span><br><span class="line-number">121</span><br><span class="line-number">122</span><br><span class="line-number">123</span><br><span class="line-number">124</span><br><span class="line-number">125</span><br><span class="line-number">126</span><br><span class="line-number">127</span><br><span class="line-number">128</span><br><span class="line-number">129</span><br><span class="line-number">130</span><br><span class="line-number">131</span><br><span class="line-number">132</span><br><span class="line-number">133</span><br></div></div><h2 id="返回到app-vue" tabindex="-1"><a class="header-anchor" href="#返回到app-vue" aria-hidden="true">#</a> 返回到App.vue</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>// App.vue
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 路由占位符 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token comment">// 导入helloword</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">&#39;app&#39;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- style样式 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>访问页面 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630981017383-d7f0c821-f041-42ef-9cee-49fba72e944d.png" data="aurora"> 现在需要让用户访问根目录就自动跳转到login页面 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630769650566-dd0d50e4-6569-4795-9128-3f7e09ea1f20.png" data="aurora"></p><h3 id="tips" tabindex="-1"><a class="header-anchor" href="#tips" aria-hidden="true">#</a> tips:</h3><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630856611129-85b5aca8-3d33-4529-8616-8a6642e4f542.png" data="aurora"> post返回值是一个Promise 对象，为了简化Promise操作，我们可以用async await 来优化 await 只能用在async的方法中，所以需要把vaild修饰成异步，这样就能直接拿到服务器返回的数据{ data: res }中的data 才是服务器的真实数据，然后重命名为res对象，然后在根据res的meta属性来判断是否为200，为200就登录成功并打印，不为200就失败并打印。</p><h2 id="进行登录跳转" tabindex="-1"><a class="header-anchor" href="#进行登录跳转" aria-hidden="true">#</a> 进行登录跳转</h2><h2 id="" tabindex="-1"><a class="header-anchor" href="#" aria-hidden="true">#</a> <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630943585942-28b9c95a-5d13-4c89-9e35-4364ae9c0b68.png" data="aurora"></h2><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630942985946-a6db3ced-1963-4e4f-8630-6760f2af8396.png" data="aurora"> 第一步：你需要进行组件导入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630943065723-b08e3828-abc8-440a-8606-716708402658.png" data="aurora"> 进行全局导入后，以后用到message就可以直接用this.$message.xxx() 第二步：代码使用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630943185384-af249e8b-1a5b-447c-bbdc-3b415332ea62.png" data="aurora"></p><h2 id="路由导航守卫控制访问权限" tabindex="-1"><a class="header-anchor" href="#路由导航守卫控制访问权限" aria-hidden="true">#</a> 路由导航守卫控制访问权限</h2><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 为路由对象，添加 beforeEach 导航守卫</span>
router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">to<span class="token punctuation">,</span> form<span class="token punctuation">,</span> next</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
  <span class="token comment">// 如果用户访问的登录页，直接放行</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>path <span class="token operator">===</span> <span class="token string">&#39;/login&#39;</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token comment">// 从 sessionStorage 中获取保存的token值</span>
  <span class="token keyword">const</span> tokenStr <span class="token operator">=</span> window<span class="token punctuation">.</span>sessionStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">&#39;token&#39;</span><span class="token punctuation">)</span>
  <span class="token comment">// 没有token，强制跳转到登录页</span>
  <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>tokenStr<span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token string">&#39;/login&#39;</span><span class="token punctuation">)</span>
  <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>判断用户在没有token了自动跳转到登录界面 需要进行router.js改写 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630943297886-e2976531-f536-4403-83d4-08584b89ed03.png" data="aurora"></p><h2 id="退出功能" tabindex="-1"><a class="header-anchor" href="#退出功能" aria-hidden="true">#</a> 退出功能</h2><p><strong>退出功能实现原理</strong> 基于token的方式实现退出比较简单，只需要销毁本地的token即可。这样，后续的请求就不会携带token，必须重新登录生成一个新的token之后才可以访问</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 清空token</span>
window<span class="token punctuation">.</span>sessionStorage<span class="token punctuation">.</span><span class="token function">clear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 跳转到登录页</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token string">&#39;/login&#39;</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630979270042-f01b7d8a-0651-4046-999e-b4a5c52167ca.png" data="aurora"></p><h2 id="主页布局" tabindex="-1"><a class="header-anchor" href="#主页布局" aria-hidden="true">#</a> 主页布局</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-container</span><span class="token punctuation">&gt;</span></span>
    // 头部区域
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-header</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-container</span><span class="token punctuation">&gt;</span></span>
    // 侧边栏区域
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-asider</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-asider</span><span class="token punctuation">&gt;</span></span>
    // 右侧主体区域
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-main</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-main</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-container</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-container</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631006012378-c14ce27a-2742-4bc5-a2a7-b8321a01b9f3.png" data="aurora"></p><h2 id="左侧菜单布局" tabindex="-1"><a class="header-anchor" href="#左侧菜单布局" aria-hidden="true">#</a> 左侧菜单布局</h2><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menus</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-submenu</span><span class="token punctuation">&gt;</span></span>
        // 这个template 是一级菜单的内容模版
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>一级菜单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        // 在一级菜单中，可以嵌套二级菜单
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-menu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>二级菜单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-submenu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menus</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631010186580-d438669f-e8b0-4fe5-97c8-e644333b2810.png" data="aurora"></p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token comment">&lt;!-- 侧边栏 --&gt;</span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-aside</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>200px<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 侧边栏菜单区 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu</span>
          <span class="token attr-name">background-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#333744<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#fff<span class="token punctuation">&quot;</span></span>
          <span class="token attr-name">active-text-color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#ffd04b<span class="token punctuation">&quot;</span></span>
        <span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 一级菜单 --&gt;</span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-submenu</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- 一级菜单的模板区 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token comment">&lt;!-- 图标 --&gt;</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-location<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
              <span class="token comment">&lt;!-- 文本 --&gt;</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>一级菜单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
            <span class="token comment">&lt;!-- 二级菜单 --&gt;</span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-menu-item</span> <span class="token attr-name">index</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>1-4-1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
              <span class="token comment">&lt;!-- 图标 --&gt;</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>el-icon-location<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">&gt;</span></span>
              <span class="token comment">&lt;!-- 文本 --&gt;</span>
              <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>二级菜单<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu-item</span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-submenu</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-menu</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-aside</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><p>需要element.js进行注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631011576393-801589c7-e455-42b6-899a-8f4dcbd0a6c2.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631011559546-7507a82e-1bac-40f9-95ca-287ed99fb890.png" data="aurora"></p><h2 id="通过接口获取菜单数据" tabindex="-1"><a class="header-anchor" href="#通过接口获取菜单数据" aria-hidden="true">#</a> 通过接口获取菜单数据</h2><p>通过axios请求拦截器添加token，保证拥有获取数据的权限</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>// axios请求拦截(预处理)
axios.interceptors.request.use(config =&gt;{
  // 为请求头对象添加Token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem(&#39;token&#39;)
  return config
})
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631024048609-f243203f-c873-49bd-a4d8-14b2c23175f7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631024090097-11b2bf12-a936-4e7d-b3db-2b893ad1df16.png" data="aurora"> 对接口请求，获取详细信息： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631029264401-b0c57aad-fbc7-41a7-a666-8ff6e7b3d770.png" data="aurora"> 就可以看到已经获取到数据，所有的一级菜单都放在了data数据中，二级菜单就嵌到了children中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631029807923-d7268b80-a976-494d-89fe-aa9ac6a67757.png" data="aurora"> 拿到了数据 我们就需要渲染到页面中 第一步：需要在一级菜单进行v-for循环 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631029632895-29b0140b-56ea-4dcd-b33b-b77379a5df1d.png" data="aurora"> 第二步：需要在一级菜单的基础上对二级菜单再进行v-for循环 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631029734990-b32376e0-b02f-4447-8edd-5cc3a9b98767.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631029840078-90d71581-3859-4680-aba7-55be0ffcfc92.png" data="aurora"> 代码： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631030300992-f8bf2a61-5a50-4262-bbf6-df9a2752df25.png" data="aurora"> 不过可以看到一级菜单的图标都为统一不是很好看，我们需要整改下 第一步：先自定义iconsObj <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631066685204-32ecab63-bbc0-4c7a-aa4d-6afec488af0d.png" data="aurora"> 第二步：在一级菜单的图标中进行v-bind双向绑定 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631066777450-e2031516-4273-4636-96c4-e85286d201fc.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631066805025-725db87b-b5bc-4a8b-8371-977ad33e8328.png" data="aurora"> fix展开后对不齐的问题，先看效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067298772-fc3ac6e1-62c6-441d-b660-60da6664be11.png" data="aurora"> 经过分析： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067390377-49f4b206-3cc0-4c54-a90c-d23bd8c92ff2.png" data="aurora"> 于是可以在css选择器中添加个border-right: none;就可以了 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067435353-4f6e7f95-ee4e-4c3b-88ca-61e880ed0122.png" data="aurora"> fix可以将一级菜单全部展开，先看效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067579456-a42ace69-8da9-4ad6-abf0-07c8a708596a.png" data="aurora"> 经过分析：element-ui是默认展开的，不过也提供了只保持一个子菜单展开的api <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067620566-234eccb0-a2f0-48ca-b8dd-234254b653a8.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631067730173-bd9b7c28-7784-42c8-97ed-22a2ca24928e.png" data="aurora"> 水平折叠收起菜单 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079074540-4e9ca6ae-9a07-4df3-817d-c0f94ab7b6bd.png" data="aurora"> 经过分析：element-ui是默认不折叠的，不过也提供了只保持一个子菜单展开的api <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079155147-47d74796-15fe-4882-a25f-6038ae99fc9a.png" data="aurora"> 第一步：在el-menu新增 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079266193-0738a5a9-ef7c-449b-9837-58401a56ce42.png" data="aurora"> 第二步：自定义一个div，并赋予click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079424752-89cd8fe7-df9a-43d2-8f9c-9b1968efd27a.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079506074-74d58590-8298-4cfa-a2d3-618baf82f9b0.png" data="aurora"> 第三步：在data()定义初始值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079316264-18cafcc6-6bbc-4ed8-8340-978fcbe9f184.png" data="aurora"> 第四步：动态赋值侧边栏宽度 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631079681861-d78d9380-f6ae-4f74-a6cd-0795072c3ba4.png" data="aurora"></p><h2 id="路由重定向" tabindex="-1"><a class="header-anchor" href="#路由重定向" aria-hidden="true">#</a> 路由重定向</h2><p>第一步：创建个Welcome.vue文件 ​</p><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631086159448-9badc024-fe3c-474e-a68f-83019a304e14.png" data="aurora"> 第二步：在router里面导入Welcome.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631086632545-9806b0a1-ae60-4193-8441-475783a1ba80.png" data="aurora"> 第三步：在Home.vue中渲染出Welcome.vue的内容 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631086762022-cdcc653f-acdc-4807-9ff1-bf7a4abb1a34.png" data="aurora"></p><h2 id="侧边栏路由跳转" tabindex="-1"><a class="header-anchor" href="#侧边栏路由跳转" aria-hidden="true">#</a> 侧边栏路由跳转</h2><p>步骤一： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631095394981-abcc243f-614a-4164-92ba-d627ea097ce4.png" data="aurora"> 步骤二： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631095555503-158dbb00-3aa9-4129-85f3-8c62d0f61adf.png" data="aurora"> ​</p><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631095567959-5ae38ec2-27df-4d94-b22f-1ba36e457953.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631095482644-24014c68-9b59-46a0-bb85-42c38b62000d.png" data="aurora"></p><h2 id="用户列表的开发" tabindex="-1"><a class="header-anchor" href="#用户列表的开发" aria-hidden="true">#</a> 用户列表的开发</h2><p>第一步：在comments里新建一个user的文件夹，创一个Users.vue的文件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631109629639-bf486bd5-e42f-47f0-bca9-e18f1e57bbca.png" data="aurora"> 第二步：在router里面引用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631109681292-c4fe978f-4b5c-4780-9c73-6c064f7069ff.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631109703566-233b422e-5ec0-47eb-a962-3147db23d944.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631109736073-fdf42087-2583-44e1-8b18-604a1a331af2.png" data="aurora"></p><h2 id="fix点击二级菜单不会高亮-刷新后又重置" tabindex="-1"><a class="header-anchor" href="#fix点击二级菜单不会高亮-刷新后又重置" aria-hidden="true">#</a> fix点击二级菜单不会高亮，刷新后又重置</h2><p>步骤一：在侧边栏增加default-active语法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631115846836-b11d6578-5895-440a-8c85-5a6907218013.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631116003562-2fb2e80c-67b1-4d64-b5a4-02fee7dc99cd.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631115969339-3fc33481-1bd3-4848-b395-b6c9c850767c.png" data="aurora"> 第二步：我们需要动态渲染路径 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631116150514-24dbfcd8-3d85-4685-b5f0-1fa2b8d9c4cd.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631116724256-00de1477-02ea-452a-8cde-d4a75d13ae5c.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631116894038-2a10c324-cdcb-4fc4-a329-13390ed188d5.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631116973732-883c2f89-1949-4618-8cff-80d0c3a3f936.png" data="aurora"> 组件创建了需要执行created生命周期函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631117113463-dbd09024-7e65-49af-b942-1feb26032f25.png" data="aurora"> 在点击不同连接的时候，我们需要给activePath重新赋值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631117262776-482a5b96-1898-409b-b996-7742d963a47e.png" data="aurora"> 这样就不会点了其他高亮然后再点回来不高亮啦(可能有点绕) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631117812022-29e86707-094c-4f5c-9886-42d927783d70.gif" data="aurora"></p><h2 id="用户列表" tabindex="-1"><a class="header-anchor" href="#用户列表" aria-hidden="true">#</a> 用户列表</h2><h3 id="增加面包屑" tabindex="-1"><a class="header-anchor" href="#增加面包屑" aria-hidden="true">#</a> 增加面包屑</h3><p>步骤一：element-ui给出了面包屑的方案 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153038005-64848dea-c82f-4d3d-9019-e68aad690f34.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153056971-31e02298-4c91-4980-a1cc-c15d86e16ca2.png" data="aurora"> 我们只需要复制过来 步骤二：需要在element.js中进行按需引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153135239-aecedb9c-35e4-470d-b52b-e3a831995952.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153168391-ce5bd210-3cf7-457b-ae77-9460c1e461cd.png" data="aurora"></p><h3 id="增加card卡片" tabindex="-1"><a class="header-anchor" href="#增加card卡片" aria-hidden="true">#</a> 增加Card卡片</h3><p>步骤一：element-ui给出了卡片的方案 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153411451-2469aa4c-97e3-4472-a319-6da61f5090a6.png" data="aurora"> 我们只需要复制过来删除不必要的东西 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153535729-2ac0f2bc-4130-4336-aced-93eaa35a89b5.png" data="aurora"></p><h3 id="增加layout布局之分栏间隔" tabindex="-1"><a class="header-anchor" href="#增加layout布局之分栏间隔" aria-hidden="true">#</a> 增加Layout布局之分栏间隔</h3><p>步骤一：element-ui给出了卡片的方案 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153394340-e43d86b1-f37b-4e1f-8aff-109d8271d7c0.png" data="aurora"> 我们只需要复制过来删除不必要的东西 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153689088-726d0878-6517-405a-afb8-3d424a46d9d0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153738634-24ddba4f-68e8-4940-875f-ec1ea9b00d90.png" data="aurora"> tips： 需要对card做样式修改。可以在global.css中做全局设定，当然也可以自建class进行修改样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153953034-91a745a5-9f6c-4b8e-93fa-c0abe092fb93.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631153860644-0a523b23-41e7-406b-a86e-b73328658bab.png" data="aurora"></p><h3 id="增加获取用户列表数据" tabindex="-1"><a class="header-anchor" href="#增加获取用户列表数据" aria-hidden="true">#</a> 增加获取用户列表数据</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631164701057-9b753ac9-ab2d-45ca-b027-557bcf4f2fb1.png" data="aurora"> 第二步：将接口请求参数定义到data中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631164897576-fb768e9e-22bd-4bed-8659-9547db7d1297.png" data="aurora"> 第三步：进行axios请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631164928526-94720036-6858-4a3b-bde8-de047c38d8e8.png" data="aurora"> 第四步：定义空列表 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631165009888-a31022f0-7c82-481b-b1eb-00421871a52a.png" data="aurora"> 第五步：赋值数据到空列表中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631165048190-2e4102c1-2004-4ff3-b2a7-fc3d418ea230.png" data="aurora"></p><h3 id="增加渲染用户列表数据" tabindex="-1"><a class="header-anchor" href="#增加渲染用户列表数据" aria-hidden="true">#</a> 增加渲染用户列表数据</h3><p>快速入门Table表格(element-ui提供了方法) 第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631200718746-68366a58-8f64-4d22-a209-10e0692ecbc7.png" data="aurora"> 第二步：copy代码 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631201130634-1b8366dd-a1d4-48b4-a3dc-14ac0bbebdb0.png" data="aurora"> 第三步：重置样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631201181460-d7c9fda0-1d28-45b2-bf11-97392fde14fa.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631201267250-973f986a-9803-42fc-af24-9c4a85dc5084.png" data="aurora"> 发现序号id，值非常大，不便于查看，我们需要自己创建一个索引，特别简单 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631201521547-314c2659-f877-4919-8c63-7640e876c53f.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631201543006-a41c2bbb-ef60-414c-b992-182225f3fd40.png" data="aurora"></p><h3 id="增加状态开关" tabindex="-1"><a class="header-anchor" href="#增加状态开关" aria-hidden="true">#</a> 增加状态开关</h3><p>快速入手Switch开关(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631203419939-1a18bff4-1534-46a7-8e60-e4813e47ae9c.png" data="aurora"> 步骤一：作用域插槽 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631203488035-8733d710-7c3f-453b-b9c2-eee79c73a72f.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631203510426-a6f7225d-9161-4e67-9e78-253d55849eb1.png" data="aurora"> 步骤二：将v-model绑定到作用域的mg_state <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631203629905-278fc5d7-9dbc-42e6-9b97-b981d16953ef.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631203677506-6cdbe60f-e410-4720-9c71-14e24273d346.png" data="aurora"> fix更改后刷新重置，没有更改数据库值 步骤一：element-ui给了一个解决方法api <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631250887071-a213893f-adfd-4c28-90e6-49a21747b3ea.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631250904484-1138f1a4-90e5-43a8-b43d-867d92f6df90.png" data="aurora"> 步骤二：修改用户状态接口(put)方法 ​</p><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631251010540-64f64887-746e-4162-a29b-55865d29da56.png" data="aurora"> 步骤三：监听switch开关状态的改变 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631250995177-db554722-6e5e-4377-ba52-dbd8cad11193.png" data="aurora"> 接口地址分析： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631251306436-1d70ec52-eb2f-46bb-aceb-b47072f53d1b.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631251531147-975d2134-a8ba-4bf5-998d-f38ee7a3b92a.gif#clientId=u7469a618-d3c3-4&amp;from=drop&amp;height=279&amp;id=ub7bd726d&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=372&amp;originWidth=896&amp;originalType=binary&amp;ratio=1&amp;size=1226480&amp;status=done&amp;style=none&amp;taskId=u273812d8-8f39-4fc9-ba83-6577a357885&amp;width=672" data="aurora"></p><h3 id="增加操作按钮" tabindex="-1"><a class="header-anchor" href="#增加操作按钮" aria-hidden="true">#</a> 增加操作按钮</h3><p>快速入手Tooltip 文字提示(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631240195650-791f25bd-06e6-433e-8027-df533f80e944.png" data="aurora"> 步骤一： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631240500053-2baae590-8706-44c1-bca9-cfed13483fb1.png" data="aurora"> 步骤二：在element.js按需导入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631241451032-fb39fb60-7165-40a5-b6b6-747f3a65a73d.png" data="aurora"> ​</p><p>效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631240525106-fb8112bd-62bd-4424-8f8b-66692d4d4c45.png" data="aurora"></p><h3 id="增加分页模块" tabindex="-1"><a class="header-anchor" href="#增加分页模块" aria-hidden="true">#</a> 增加分页模块</h3><p>快速入手Pagination分页(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631243657684-41caaed9-2cac-4c1b-be4e-06df0764842c.png" data="aurora"> 步骤一： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631243701040-1330b22f-9a40-48f1-b1d3-8c2c01d944c1.png" data="aurora"></p><table><thead><tr><th>事件名称</th><th>说明</th></tr></thead><tbody><tr><td>size-change</td><td>pageSize 改变时会触发</td></tr><tr><td>current-change</td><td>currentPage 改变时会触发</td></tr><tr><td>current-page</td><td>当前页数</td></tr><tr><td>page-sizes</td><td>每页显示个数选择器的下拉</td></tr><tr><td>page-size</td><td>每页显示条目个数</td></tr><tr><td>layout</td><td>组件布局，子组件名需要用逗号隔开</td></tr><tr><td>total</td><td>总条目数</td></tr></tbody></table><p>步骤二：传参 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631244457135-af538906-6850-4f5d-b569-7b30008e8fd7.png" data="aurora"> 第三步：在element.js按需导入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631244549239-f3b0d61a-1d2a-4efa-85b0-7434b095b03f.png" data="aurora"> 第四步：重置样式(global.css) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631244597564-b2fdb577-cc22-4f85-bb42-1065a79362c7.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="12.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631244721429-5c447d47-2384-4224-b88a-10264be70c2e.gif" data="aurora"></p><h3 id="增加搜索-清空功能" tabindex="-1"><a class="header-anchor" href="#增加搜索-清空功能" aria-hidden="true">#</a> 增加搜索/清空功能<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631268057663-9165a9f9-b2fb-4c06-97e1-c729cbb93e4f.png" data="aurora"></h3><p>效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631268200216-94e506d6-0a31-48b0-989e-9c2322bf5db3.gif#clientId=uc6985ffd-b5f8-4&amp;from=drop&amp;id=uc89061bc&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=380&amp;originWidth=834&amp;originalType=binary&amp;ratio=1&amp;size=572399&amp;status=done&amp;style=none&amp;taskId=ucfb4e0e5-2e78-4755-a76a-82e9b7d315d" data="aurora"></p><h3 id="增加添加用户对话框" tabindex="-1"><a class="header-anchor" href="#增加添加用户对话框" aria-hidden="true">#</a> 增加添加用户对话框</h3><p>快速入手Dialog对话框(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631269036141-99fc9d0f-af98-49e6-a656-39a18bcb8060.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631269053456-056c4b21-9ed7-4692-add6-9990b1bc3ace.png" data="aurora"> 第二步：进入element.js按需引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631269091711-8d56c3fc-7968-43c9-8004-d78f38bdf672.png" data="aurora"> 第三步：初始化对话框为隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631269173418-813c3404-306f-40f5-86fc-c9f842fc7768.png" data="aurora"> 第四步：在添加用户这个按钮上给一个click事件，并赋值为true <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631269217056-8c91cd5a-2405-423b-81e0-c4b7025fb138.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631269352563-b11e86a6-fcfd-4bb5-9744-e267ba686216.gif#clientId=uc6985ffd-b5f8-4&amp;from=drop&amp;id=u8502b152&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=646&amp;originWidth=868&amp;originalType=binary&amp;ratio=1&amp;size=2784517&amp;status=done&amp;style=none&amp;taskId=uebc051b7-10b4-4473-ba76-ffe6a7384fd" data="aurora"></p><h3 id="完善添加用户表单" tabindex="-1"><a class="header-anchor" href="#完善添加用户表单" aria-hidden="true">#</a> 完善添加用户表单</h3><p>步骤一： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="code.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631286477590-ea5d4602-95a0-41df-977d-0b964fcf9fe2.png" data="aurora"> model数据绑定对象 rules验证规则对象 ref引用对象 label-width确定了文本所占宽度 步骤二：添加表单用户的表单数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631286568222-8e976ad5-452c-475a-89d3-b469c7582ce9.png" data="aurora"> 步骤三：添加表单的验证规则对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="code.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631286646894-8cc4a46a-af59-4f5c-a1e3-3488bbef86d7.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631286700716-c94c96fd-e37a-4280-baa7-f017783d5bcf.png" data="aurora"> 新增邮箱、手机校验规则 快速入手Form表单自定义校验规则(element-ui提供了方法) 步骤一：查看官方文档示例 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631288085180-6298230e-2100-42c5-af5e-9921280ecba4.png" data="aurora"> 因为邮箱/手机这种校验规则比较复杂，这里推荐大家下个插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631288169482-0f301975-de15-4540-9947-925af63bbe27.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631288315721-316f5776-3afe-410a-a15e-909537ba452b.png" data="aurora"> 步骤二：增加校验规则 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631288404312-c14e187d-dea3-4348-90de-e717952cd425.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631288835385-9697d432-478b-4f81-9780-438ac4fd8eaa.gif#clientId=uc6985ffd-b5f8-4&amp;from=ui&amp;id=ua4b515ab&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1364&amp;originWidth=1748&amp;originalType=binary&amp;ratio=1&amp;size=3579962&amp;status=done&amp;style=none&amp;taskId=u574d9e92-da15-4301-8b8e-ac1a6fe574a" data="aurora"> fix填写完表单后重新打开未重置效果 第一步：element-ui给出了Form表单重置方案 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631340108587-0e0705ad-3eee-4cd9-8f30-c6db3e6c7463.png" data="aurora"> 第二步：写一个close的关闭事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631340221686-903c9cde-dae3-4720-bc34-2255890d82a6.png" data="aurora"> 第三步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631340361060-849c09b3-0f1b-4f79-9d7e-151f388a82c3.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631340474388-997c8f66-9f86-4079-96be-e68c308848ed.gif#clientId=u8cadadba-31b3-4&amp;from=drop&amp;id=u4b64d93a&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1128&amp;originWidth=1776&amp;originalType=binary&amp;ratio=1&amp;size=6638665&amp;status=done&amp;style=none&amp;taskId=u87dba54b-1eb7-405f-a850-5588f2b52f0" data="aurora"></p><h2 id="添加用户" tabindex="-1"><a class="header-anchor" href="#添加用户" aria-hidden="true">#</a> 添加用户</h2><h3 id="请求预校验" tabindex="-1"><a class="header-anchor" href="#请求预校验" aria-hidden="true">#</a> 请求预校验</h3><p>步骤一：当点击确定时，我们需要预加载数据看是否符合规则 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631341198815-91026955-042f-4c63-9a8c-aabcd7f4054f.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631341224285-013d6ae4-1084-4ad2-a503-2400c1e6ab55.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631341307767-6fe5d7ed-313d-488e-ada5-e7ef7cd3ce90.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631341382017-1a47953c-6917-4626-9d74-9590272f1c38.png" data="aurora"></p><h3 id="请求添加一个新用户" tabindex="-1"><a class="header-anchor" href="#请求添加一个新用户" aria-hidden="true">#</a> 请求添加一个新用户</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631342225105-987b5c31-898b-432c-be3f-d173480fa6ab.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631342245730-50e17db2-7d9c-4173-983f-68613c9e1a56.png" data="aurora"> 第二步：发起axios请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631342506145-925646e2-1a34-407e-a5c4-afdb7e86ef3b.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631343173031-9281ce0b-7a3e-4e97-8ed1-a17136becf72.gif#clientId=u8cadadba-31b3-4&amp;from=drop&amp;height=807&amp;id=uf02f8f01&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1614&amp;originWidth=1998&amp;originalType=binary&amp;ratio=1&amp;size=4838158&amp;status=done&amp;style=none&amp;taskId=uf512826e-6996-4f4c-9243-839b2261bfe&amp;width=999" data="aurora"></p><h2 id="操作之编辑" tabindex="-1"><a class="header-anchor" href="#操作之编辑" aria-hidden="true">#</a> 操作之编辑</h2><h3 id="增加修改用户对话框" tabindex="-1"><a class="header-anchor" href="#增加修改用户对话框" aria-hidden="true">#</a> 增加修改用户对话框</h3><p>第一步：使用Dialog对话框(element-ui给出了例子) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631344213109-cce00930-e9e0-4fe7-b423-53e8ddef5285.png" data="aurora"> 第二步：在编辑按钮上增加click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631344277720-4f538d84-2ff6-4ebf-8108-646cd0cfbd37.png" data="aurora"> 第三步：增加编辑对话框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631344480074-5a50589c-6b2a-4433-9c74-2478ef37c68a.png" data="aurora"> 第四步：methods增加显示为true <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631344790356-3b6b1474-e7a2-4912-9fd5-dd972a1c599b.png" data="aurora"> 第五步：控制修改用户对话框显示与隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631344968777-8a41e783-3b92-43e9-9ba5-88a97f879f66.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631345362896-3f9c59ce-6fd6-42b6-955a-cda15a9d845d.gif#clientId=u7c4b12d0-c89a-4&amp;from=drop&amp;id=u2913cd78&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=850&amp;originWidth=2000&amp;originalType=binary&amp;ratio=1&amp;size=1700977&amp;status=done&amp;style=none&amp;taskId=u23aa2248-2d15-4941-b0c1-6766ce9b336" data="aurora"></p><h3 id="增加根据用户id查询用户信息" tabindex="-1"><a class="header-anchor" href="#增加根据用户id查询用户信息" aria-hidden="true">#</a> 增加根据用户id查询用户信息</h3><p>第一步：使用scope.row.id获取到用户id <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498472159-d923054c-9a24-4cb2-a4b9-5ffd7eab1064.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498679051-c69f7181-fbc0-40c8-8d00-be9563108108.png" data="aurora"> 第三步：进行接口文档的调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498550159-e36be43d-a1fd-4bd5-bbd6-dc7c1cb9426c.png" data="aurora"> 第四步：在data中创建editForm <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498763649-f334b225-2c32-417a-8e67-5eccedf5a861.png" data="aurora"> 第五步：res的数据保存到第四步中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498872999-a63f2108-e53d-420e-97cd-7203876ced17.png" data="aurora"> 效果：点击编辑按钮后将id传入到api接口中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631498950298-cf17605c-6362-4a22-a204-f09bc4ec96eb.png" data="aurora"></p><h3 id="增加编辑表单" tabindex="-1"><a class="header-anchor" href="#增加编辑表单" aria-hidden="true">#</a> 增加编辑表单</h3><p>第一步：制作表单 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631545228921-1d598e6d-21b3-4fbd-957c-d961b805048f.png" data="aurora"> 第二步：定义验证规则 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631545312716-28775b78-251b-4278-a8a5-e844ddfbe70e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631545508174-3f3dd207-9ae9-4220-b253-4c268d1edf89.gif#clientId=u8fbb3a8e-6e4d-4&amp;from=drop&amp;id=ufcac2874&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1328&amp;originWidth=3206&amp;originalType=binary&amp;ratio=1&amp;size=2983362&amp;status=done&amp;style=none&amp;taskId=u6cbde974-f7d6-48b1-a40c-29fa782b1e7" data="aurora"></p><h3 id="fix验证不通过存留状态" tabindex="-1"><a class="header-anchor" href="#fix验证不通过存留状态" aria-hidden="true">#</a> fix验证不通过存留状态</h3><p>第一步：添加一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631546574541-a183fcea-f627-47c4-8b8c-18698f6f7a1f.png" data="aurora"> 第二步：监听修改用户关闭对话框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631546658268-cabaff50-60f3-44b1-ac72-073039d732da.png" data="aurora"></p><h3 id="增加提交修改预校验表单" tabindex="-1"><a class="header-anchor" href="#增加提交修改预校验表单" aria-hidden="true">#</a> 增加提交修改预校验表单</h3><p>第一步：在提交按钮上增加一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631547432203-358b4776-50fa-4eda-bb6b-a3cc61847722.png" data="aurora"> 第二步：进行预校验 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631547473998-28021b66-4b10-45ed-90e3-429db910aee9.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631547586699-daa06eb0-9acb-4e8f-8be2-37ddfc659ce0.png" data="aurora"></p><h3 id="增加修改用户信息操作" tabindex="-1"><a class="header-anchor" href="#增加修改用户信息操作" aria-hidden="true">#</a> 增加修改用户信息操作</h3><p>步骤一：看后端接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631548666981-4ea2a716-c9a4-4d8e-852f-d94c9f4a72c2.png" data="aurora"> 步骤二：在确定按钮上添加click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631548784288-aba8f3ca-143a-4cbd-ae92-a1837bfb9e25.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631548912181-5a738486-3784-4bbb-9ec6-c1e096721794.gif#clientId=u8fbb3a8e-6e4d-4&amp;from=drop&amp;id=uf82c5997&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1328&amp;originWidth=3206&amp;originalType=binary&amp;ratio=1&amp;size=4489520&amp;status=done&amp;style=none&amp;taskId=u9fafb7e8-47da-4cf4-b8ba-aa1ecbaac9f" data="aurora"></p><h3 id="增加删除用户信息操作" tabindex="-1"><a class="header-anchor" href="#增加删除用户信息操作" aria-hidden="true">#</a> 增加删除用户信息操作</h3><p>第一步：导入MessageBox 弹框(element-ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631584879394-b7cc3a42-af77-4050-b4c7-664fd32f77ca.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631584898638-d1f2ec4f-bc58-40a7-8a00-d6883c2114b7.png" data="aurora"> 第二步：在删除按钮上增加一个click(id)事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631584962422-af31b75b-2fb4-492e-86b3-a17ffb7982b5.png" data="aurora"> 第三步：根据id删除对应用户信息(参考elementui给出的方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631585098124-cdcecf7b-8875-424c-b344-59a295fbff54.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631585030035-b4d6c06a-2973-4526-a071-fb471df4afa4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631585261235-b365c54f-4e43-45fa-a30a-b135b476cae7.gif#clientId=u12ce9844-ff1a-4&amp;from=drop&amp;id=u4bc62201&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1144&amp;originWidth=2066&amp;originalType=binary&amp;ratio=1&amp;size=4002716&amp;status=done&amp;style=none&amp;taskId=uca34bffa-8044-42a2-89eb-89e98edf0e3" data="aurora"> 第四步：使用接口文档进行删除用户信息 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631585449694-f7382a52-3661-4a5d-9dae-6ee0221ab4fa.png" data="aurora"> 第五步：调用接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631585775213-baadf883-e0d5-4d49-bc3d-26fe005ecd75.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631585962300-2a535a5f-8662-47c6-a026-1eaba0eb241d.gif#clientId=u12ce9844-ff1a-4&amp;from=drop&amp;id=u601d5e99&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1404&amp;originWidth=3088&amp;originalType=binary&amp;ratio=1&amp;size=10084868&amp;status=done&amp;style=none&amp;taskId=ua528372c-6c5b-48c4-9a91-253b027393b" data="aurora"></p><h3 id="增加分配角色操作" tabindex="-1"><a class="header-anchor" href="#增加分配角色操作" aria-hidden="true">#</a> 增加分配角色操作</h3><p>第一步：导入Dialog对话框 弹框(element-ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632037407630-9ed3f2fa-ad08-4207-9729-6ef15c88ead8.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632037811660-f187e90f-a3b0-4d8c-9e0c-2fd69a1b62e0.png" data="aurora"> 第二步：在分配角色按钮新增click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632037752942-99946628-7bde-44a2-b333-fe6316ba76e7.png" data="aurora"> 第三步：在data中定义对话框初始化为隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632038017013-4afb4b0a-6d7f-4d23-acda-782f930fe9f7.png" data="aurora"> 第四步：点击角色分配按钮就进行展示为true <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632038244607-777e5c75-ee56-49b0-b00c-29ec04bb48d9.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632038363510-b2dd4574-1714-422c-87a1-291e3c98316b.gif#clientId=u184a7d3d-9f78-4&amp;from=ui&amp;id=u9ecdfca1&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1234&amp;originWidth=3100&amp;originalType=binary&amp;ratio=1&amp;size=1727995&amp;status=done&amp;style=none&amp;taskId=u7cc34217-8e15-4e96-86c9-a157fe4e53f" data="aurora"></p><h3 id="增加分配角色操作之下拉选择职位" tabindex="-1"><a class="header-anchor" href="#增加分配角色操作之下拉选择职位" aria-hidden="true">#</a> 增加分配角色操作之下拉选择职位</h3><p>第一步：在data创建接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632066315937-6febcccd-11ad-4697-9f83-377c2348d4fc.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632066368328-8a954fb0-fc03-4b60-b096-993a58527756.png" data="aurora"> 第三步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632066495992-9bc64f1b-363c-476a-a1e2-6b34bdfdd723.png" data="aurora"> 第四步：导入Select选择器(element-ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632066583816-0b47908f-cae4-4eea-b2f0-facedcc5bc95.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632066776181-dfe442e6-6135-429b-b6f5-c390a776d2d6.png" data="aurora"> 第五步：赋予一个接收选中对象的值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632067036862-d77bbe35-f776-4a70-8be8-1264c361c18d.png" data="aurora"> 第六步：进行组件注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632067084241-1f2a1a12-8dd3-4d75-bae3-a813f6f9af0a.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632067491838-9b6a3b95-d4b1-4e4c-8506-c0cf877b40a8.gif#clientId=u184a7d3d-9f78-4&amp;from=ui&amp;id=u24549919&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=617&amp;originWidth=1550&amp;originalType=binary&amp;ratio=1&amp;size=1029887&amp;status=done&amp;style=none&amp;taskId=u9d4c7f0a-cff4-4b31-a47b-50fe048f93f" data="aurora"></p><h3 id="新增选择职位后点击确定应用" tabindex="-1"><a class="header-anchor" href="#新增选择职位后点击确定应用" aria-hidden="true">#</a> 新增选择职位后点击确定应用</h3><p>第一步：在确定按钮增加click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632123200762-ad6f10b6-9597-4506-9069-686d5b3f8818.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632123282637-b2c1dc3f-a264-4613-b993-aa10dbb5eb5d.png" data="aurora"> 第三步：接口调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632123435836-25b030e3-f0d1-4685-b3cf-772cdf874fea.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632123633496-729f3acd-b686-4217-9ed3-91c8ef1aab8e.gif#clientId=u8e7b5c86-8d43-4&amp;from=ui&amp;id=u6e10fec1&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=589&amp;originWidth=1590&amp;originalType=binary&amp;ratio=1&amp;size=3536679&amp;status=done&amp;style=none&amp;taskId=u0806e9a2-961a-4764-b98a-3c259ffea27" data="aurora"></p><h3 id="fix第二次选择进行重置" tabindex="-1"><a class="header-anchor" href="#fix第二次选择进行重置" aria-hidden="true">#</a> fix第二次选择进行重置</h3><p>第一步：给分配角色一个close事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632123692248-1a138f84-ca17-453e-a1ff-58f247e1352a.png" data="aurora"> 第二步：重置列表 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632123718309-fdbcc001-13b4-4832-9609-f967d13d3ca8.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632123877664-69fbf8c2-33c7-4c12-bb9e-4680607fb7ae.gif#clientId=u8e7b5c86-8d43-4&amp;from=ui&amp;id=ud90fefc6&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=589&amp;originWidth=1590&amp;originalType=binary&amp;ratio=1&amp;size=3344608&amp;status=done&amp;style=none&amp;taskId=u6be0ca99-d7d5-4e23-9382-ab9adb58144" data="aurora"></p><h2 id="权限列表" tabindex="-1"><a class="header-anchor" href="#权限列表" aria-hidden="true">#</a> 权限列表</h2><h3 id="增加权限列表路由" tabindex="-1"><a class="header-anchor" href="#增加权限列表路由" aria-hidden="true">#</a> 增加权限列表路由</h3><p>第一步：写Rights.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="code.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631628484323-a95a42ec-eb82-4139-9377-2291fa64826f.png" data="aurora"> 第二步：在路由引入步骤一 注意：因为在home里面继续跳转，所以权限列表为home的子路由 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631628794709-07a5e976-d1f5-4016-bcc5-141f4e2bd9ef.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631628779073-895577bf-a412-4a87-942a-d3197f2f1ded.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631628824446-dce089e1-63c7-4598-933b-6e75af68e3ed.png" data="aurora"></p><h3 id="权限列表的基本布局" tabindex="-1"><a class="header-anchor" href="#权限列表的基本布局" aria-hidden="true">#</a> 权限列表的基本布局</h3><p>第一步：使用面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631629215947-6167b5d2-f38e-45d9-af3f-0343d724dba7.png" data="aurora"> 第二步：使用card卡片 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631629282775-94d87c13-203e-4a7e-a44c-06d8ff8c7e2b.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631629331190-317a7f8e-a86a-4b78-8ef0-5d811f30ff58.png" data="aurora"></p><h3 id="权限列表的数据获取" tabindex="-1"><a class="header-anchor" href="#权限列表的数据获取" aria-hidden="true">#</a> 权限列表的数据获取</h3><p>第一步：创建一个权限列表的接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631629942641-2e8a1e1e-eed7-4809-ab7d-5630d736cb5c.png" data="aurora"> 第二步：创建生命周期 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631630016802-bc3a93d8-780a-4d86-9e3f-5658b8619bf9.png" data="aurora"> 第三步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631630201788-969ce63c-b441-4d63-a6ec-f0bf3952b8d3.png" data="aurora"> 第四步：创建方法并声明 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631630129725-a0ad1042-b23c-4023-9c05-d2f3e2d17ae0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631630271992-b1003ffd-dba8-4b2e-a379-5196d049a3e6.png" data="aurora"></p><h3 id="表格渲染" tabindex="-1"><a class="header-anchor" href="#表格渲染" aria-hidden="true">#</a> 表格渲染</h3><p>第一步：使用el-card <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631631575458-7c49dd5d-305c-4035-986e-00627f900d94.png" data="aurora"> 第二步：使用el-table表格<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631631664770-721a64c4-f04e-495b-b4e4-8182a3ffcc95.png" data="aurora"> 第三步：使用el-table-column 填入数据 label 定义列名 width定义列宽 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631632107522-0dfe3e00-3a59-416c-b409-8776e6aa013d.png" data="aurora"> 第四步：使用el-tag标签 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631632209574-cf87f7e5-ce90-4c6b-9c29-dd66c28d2b71.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631632229827-924faa12-6229-4ddc-82a7-fda4bd0a181b.png" data="aurora"></p><h2 id="角色列表" tabindex="-1"><a class="header-anchor" href="#角色列表" aria-hidden="true">#</a> 角色列表</h2><h3 id="增加角色列表路由" tabindex="-1"><a class="header-anchor" href="#增加角色列表路由" aria-hidden="true">#</a> 增加角色列表路由</h3><p>第一步：写Rights.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="code.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631669993241-09f2dd4d-9f96-4cfd-8d30-538f086fad7c.png" data="aurora"> 第二步：在路由引入步骤一 注意：因为在home里面继续跳转，所以权限列表为home的子路由 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631670071483-eacb2c4c-56d6-4e5e-9f58-45fe2a5c9173.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631670044787-cda3011e-1782-40b2-9454-4c724ae7c1ce.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631670094004-b165e301-c866-4594-9ce3-340fc6542f5e.png" data="aurora"></p><h3 id="角色列表基本布局" tabindex="-1"><a class="header-anchor" href="#角色列表基本布局" aria-hidden="true">#</a> 角色列表基本布局</h3><p>第一步：使用面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631670940491-8afd9f3f-0680-4189-ae1e-89a3fb610226.png" data="aurora"> 第二步：使用card卡片 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631670970658-d363245a-04a7-49d4-9fd4-45af7793654a.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671001581-3a63ac0d-a126-4789-a783-8c736522cc07.png" data="aurora"></p><h3 id="角色列表的数据获取" tabindex="-1"><a class="header-anchor" href="#角色列表的数据获取" aria-hidden="true">#</a> 角色列表的数据获取</h3><p>第一步：创建一个权限列表的接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671049286-f6790af3-b7a7-47cb-b32d-511486ab254a.png" data="aurora"> 第二步：创建生命周期 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671075665-9a7361e4-2572-45ef-a33c-fe8026348df6.png" data="aurora"> 第三步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671108701-8ed19be6-4d50-41a4-b69f-8bfb4ddf2255.png" data="aurora"> 第四步：创建方法并声明 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671195318-d16308c5-67f8-4714-8cae-6e7aa2d67ac1.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671233718-0de71289-3d99-41f2-aafc-41d3d20cec22.png" data="aurora"></p><h3 id="表格渲染-1" tabindex="-1"><a class="header-anchor" href="#表格渲染-1" aria-hidden="true">#</a> 表格渲染</h3><p>第一步：使用el-card <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631671902926-92a823e7-a1ef-401e-a765-85941a332d87.png" data="aurora"> 第二步：使用el-row Layout布局 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631672261970-2005131c-1a0f-4fc5-bd70-5f806a9e859f.png" data="aurora"> 第三步：使用el-table/el-table-column 表格 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631672357955-4bf3a3ca-a36a-413e-b293-53370a74ad6e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631672430473-4a9b306d-602e-425e-b46c-9c02d3e8f24a.gif#clientId=u91f3a3d5-ccad-4&amp;from=drop&amp;id=u17cc8097&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=636&amp;originWidth=892&amp;originalType=binary&amp;ratio=1&amp;size=570133&amp;status=done&amp;style=none&amp;taskId=uf8395219-c03c-4591-ada1-0aa926c1fc5" data="aurora"></p><h3 id="新增下拉列表数据展示" tabindex="-1"><a class="header-anchor" href="#新增下拉列表数据展示" aria-hidden="true">#</a> 新增下拉列表数据展示</h3><p>第一步：使用插槽进行数据展示/v-for进行循环取出值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631689143000-824c72d4-3264-447f-8127-0de745a14c53.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631689005013-d6a86c8d-cdd6-478a-9cee-7d5d662933c6.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631689094213-3afa8542-3fe4-422a-8413-fc49e9da03a0.png" data="aurora"></p><h3 id="美化一级权限表格" tabindex="-1"><a class="header-anchor" href="#美化一级权限表格" aria-hidden="true">#</a> 美化一级权限表格</h3><p>第一步：增加样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631768112307-9bcd9b9f-3310-4e90-85d4-88550d2be8ea.png" data="aurora"> 第二步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631768185392-ae586732-9d30-421d-9153-2de2361e5056.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631768253901-e83d3bb0-ae48-452a-b539-a024bbfa4719.png" data="aurora"></p><h3 id="美化二级权限表格" tabindex="-1"><a class="header-anchor" href="#美化二级权限表格" aria-hidden="true">#</a> 美化二级权限表格</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631769162020-a8d7e00e-7316-4b4f-bd91-f0e808c6c89b.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631769193248-328e5661-fda3-4313-b58f-d2ee52d747b0.png" data="aurora"></p><h3 id="美化三级权限表格" tabindex="-1"><a class="header-anchor" href="#美化三级权限表格" aria-hidden="true">#</a> 美化三级权限表格</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631802003962-a061813b-b3b4-4684-b968-0c4f7508a3e3.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631802109362-817f35b4-dc96-474d-ae49-082a31dd8f33.png" data="aurora"> 总体效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631802126961-beda5959-0dc3-4a8c-9692-c5b02d126cbd.png" data="aurora"></p><h3 id="美化权限表格" tabindex="-1"><a class="header-anchor" href="#美化权限表格" aria-hidden="true">#</a> 美化权限表格</h3><p>第一步：创建一个样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631802595538-45f92945-54da-41e6-a816-76e83e6a95eb.png" data="aurora"> 第二步：将样式放到需要的位置 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631802708852-d21fbf46-fa73-4795-b3f2-69d001591c73.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631804164307-8a45ffd1-0dc6-40d3-8412-83bbd5f0794f.png" data="aurora"></p><h3 id="新增删除权限" tabindex="-1"><a class="header-anchor" href="#新增删除权限" aria-hidden="true">#</a> 新增删除权限</h3><p>第一步：使用可移除标签(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805146698-3fa83b17-b3e3-4ea0-b3b3-13a2361e9011.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805182985-26a7fde8-5f1c-4cb5-bfb5-38cebdeba1ae.png" data="aurora"> 第二步：点击移除标签是触发的事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805243646-653efac3-af29-41bb-900b-5c8c8d04c9ef.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805265678-0d79a7f3-39bc-49e1-9abd-9ce7fd40158e.png" data="aurora"> 第三步：写二次弹框(element ui 给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805658104-df53931d-9e83-4afe-937b-d696d99b28c7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631805307560-9e14a4b0-829d-4351-9715-7f55cbe473c5.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631805450479-5000cc92-0f3e-4cce-a17b-ae2b861a8a95.gif#clientId=u803953e8-fef3-4&amp;from=drop&amp;height=822&amp;id=uf12a17e6&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1644&amp;originWidth=2824&amp;originalType=binary&amp;ratio=1&amp;size=9808120&amp;status=done&amp;style=none&amp;taskId=u51f5704e-46fa-4444-8e02-2fac3b404a3&amp;width=1412" data="aurora"></p><h3 id="fix删除权限完整功能" tabindex="-1"><a class="header-anchor" href="#fix删除权限完整功能" aria-hidden="true">#</a> fix删除权限完整功能</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631806746694-6a560cb4-2bc9-421c-a7c9-f157d5e598ef.png" data="aurora"> 第二步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631808063914-32f8b69e-2cbe-4b75-b6e7-451de7c94120.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631808201290-04b08235-5f78-475c-8cbe-3041e85975dd.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631842336970-6d2ebe17-5c33-40f2-a928-5c50dab75dc2.gif#clientId=udeae3bdc-c7dd-4&amp;from=drop&amp;height=540&amp;id=ua7cc9892&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1080&amp;originWidth=1076&amp;originalType=binary&amp;ratio=1&amp;size=2802069&amp;status=done&amp;style=none&amp;taskId=u9cbb497f-5d50-43e8-9b49-7295e73e519&amp;width=538" data="aurora"></p><h3 id="新增分配权限获取所有权限数据" tabindex="-1"><a class="header-anchor" href="#新增分配权限获取所有权限数据" aria-hidden="true">#</a> 新增分配权限获取所有权限数据</h3><p>第一步：新增一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631843768642-d5116b2e-c293-440d-8d9e-d146e79d3d29.png" data="aurora"> 第二步：点击分配权限弹框(element ui 给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631844768488-8195167c-e221-44b3-9c27-19563693ed96.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631844716101-371fff0d-5eb9-435e-b3b6-8428b5553c33.png" data="aurora"> 第三步：默认分配权限对话框为隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631845261891-56aaf578-e8dc-4348-a064-59036299bafb.png" data="aurora"> 第四步：点击对话框就显示 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631844892900-2cf653c4-6604-4f28-970e-17fd5712c9c4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631845080412-2e6503b1-4208-45be-9d06-902dec32ab57.gif#clientId=udeae3bdc-c7dd-4&amp;from=drop&amp;height=320&amp;id=ua03ca10d&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=640&amp;originWidth=1068&amp;originalType=binary&amp;ratio=1&amp;size=1610963&amp;status=done&amp;style=none&amp;taskId=uc529023e-b035-4dc4-b19a-c789e485fcc&amp;width=534" data="aurora"> 第五步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631844580754-c4e922a2-94ea-4905-80a3-7021cf6915f4.png" data="aurora"> 第六步：接口调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631845308676-7501d20c-ee99-4d57-946b-b8d8a8ab205a.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631845584379-a7f3c675-a682-4d3a-8aac-f6dadbd124b5.gif#clientId=udeae3bdc-c7dd-4&amp;from=drop&amp;id=u91c60129&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1392&amp;originWidth=3492&amp;originalType=binary&amp;ratio=1&amp;size=6972787&amp;status=done&amp;style=none&amp;taskId=u1724a19c-3b4f-405c-bb2c-f8e159243b2" data="aurora"></p><h3 id="新增分配权限树形组件" tabindex="-1"><a class="header-anchor" href="#新增分配权限树形组件" aria-hidden="true">#</a> 新增分配权限树形组件</h3><p>快速入门Tree树形控件(element-ui提供了方法) 第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631891900887-316159e1-3ace-4138-aed7-4e534f85538e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631892087087-a7faa2e6-40bc-46c4-9ddc-a3ab4de03f34.png" data="aurora"> 第二步：将控件树形树形控件属性绑定对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631892287607-14cfaa2b-355d-435e-afa4-de6f25b220b9.png" data="aurora"> 第三步：进行组件注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631892442040-8a10c443-c1c3-40a3-bbaa-b7b4bd90f385.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631892544578-c737dc0e-a8b3-469f-824d-72830c2ceedc.gif#clientId=udeae3bdc-c7dd-4&amp;from=drop&amp;height=480&amp;id=u9351e673&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=960&amp;originWidth=2362&amp;originalType=binary&amp;ratio=1&amp;size=3647793&amp;status=done&amp;style=none&amp;taskId=u66398b5a-2853-4561-9d56-8df36c25edd&amp;width=1181" data="aurora"></p><h3 id="fix分配权限复选框-默认展开" tabindex="-1"><a class="header-anchor" href="#fix分配权限复选框-默认展开" aria-hidden="true">#</a> fix分配权限复选框/默认展开</h3><p>第一步：在el-tree增加属性(element-ui给了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631942438779-265e7f24-b120-47a5-a042-2f9620aff8be.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631942672310-07679da0-aa30-4d85-ba67-8ac52a25bb2d.gif#clientId=u15e810c3-8b99-4&amp;from=drop&amp;height=677&amp;id=u48dfbb11&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=1354&amp;originWidth=1014&amp;originalType=binary&amp;ratio=1&amp;size=2380200&amp;status=done&amp;style=none&amp;taskId=u4a8d4f54-a98b-420b-81a9-e2ef226e1df&amp;width=507" data="aurora"></p><h3 id="获取角色原有权限" tabindex="-1"><a class="header-anchor" href="#获取角色原有权限" aria-hidden="true">#</a> 获取角色原有权限</h3><p>第一步：默认勾选节点key的数组(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631978069565-c6379007-d126-4039-ac25-f108f661b628.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631978294428-97b7f4f9-9bae-4577-b718-70dc0728352d.png" data="aurora"> 第二步：在data中定义一个接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631978387264-5a2f6631-e8a1-4143-8bd6-254ebfd251c8.png" data="aurora"> 第三步：进行递归函数遍历权限接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631979536230-054d1759-26ad-46a1-8710-ccb77e1e5af1.png" data="aurora"> 第四步：在分配权限增加click事件并拿到所有数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631979665728-91aa93a8-7cd8-4422-803e-5f4da93fe1c4.png" data="aurora"> 第五步：将role进行传参，将获取到的id传入第三步defkeys中 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631979732791-c7318886-faf7-46af-a86b-68ceee4414a5.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1631980066634-5e9c1c0a-4123-4fa5-b3fb-9b497b85a74c.gif#clientId=u15e810c3-8b99-4&amp;from=drop&amp;id=u732d1923&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=950&amp;originWidth=1192&amp;originalType=binary&amp;ratio=1&amp;size=5849933&amp;status=done&amp;style=none&amp;taskId=u40e7b734-6aaa-46d3-b3bf-0d80c5516f3" data="aurora"></p><h3 id="fix点击不同角色分配权限造成权限id累积" tabindex="-1"><a class="header-anchor" href="#fix点击不同角色分配权限造成权限id累积" aria-hidden="true">#</a> fix点击不同角色分配权限造成权限id累积</h3><p>第一步：新增close事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631980625059-9d08b4de-41fa-4110-a366-79dc792b783e.png" data="aurora"> 第二步：监听分配权限对话框关闭事件，没关闭一次，就像defkeys赋值一个空数组 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1631980662859-ab68f76d-f58b-41de-96d6-f4bb5b3160b3.png" data="aurora"></p><h3 id="新增角色权限增加" tabindex="-1"><a class="header-anchor" href="#新增角色权限增加" aria-hidden="true">#</a> 新增角色权限增加</h3><p>第一步：新增一个click事件在确定按钮上 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632017842750-134ce87d-523d-40b6-8c0d-6fda19fb61c2.png" data="aurora"> 第二步：定义一个dom元素 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632017814491-59aaf566-063a-490d-b94b-e10dbd93d522.png" data="aurora"> 第三步：选中权限点击确定 el-tree给了2个函数，getCheckedKeys 节点选择后返回节点的key所组成的数组 getHalfCheckedKeys 节点被选择，返回目前半选节点的key所组成的数组 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632015113420-f63436ef-0682-4ee6-988b-7db30e20a911.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632015458781-a8370feb-b90b-42f2-9729-2f7a966afdfd.png" data="aurora"><strong>tips：...为JS中展开运算符</strong></p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token keyword">let</span> a<span class="token operator">=</span><span class="token punctuation">{</span>x<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>y<span class="token operator">:</span><span class="token number">2</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> b<span class="token operator">=</span><span class="token punctuation">{</span>z<span class="token operator">:</span><span class="token number">3</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> ab<span class="token operator">=</span><span class="token punctuation">{</span><span class="token operator">...</span>a<span class="token punctuation">,</span><span class="token operator">...</span>b<span class="token punctuation">}</span><span class="token punctuation">;</span>
ab <span class="token comment">//{x:1,y:2,z:3}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632015960219-341fa18e-847c-442e-a303-ef8415e2c53b.gif#clientId=u184a7d3d-9f78-4&amp;from=ui&amp;height=459&amp;id=ude40648c&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=917&amp;originWidth=1201&amp;originalType=binary&amp;ratio=1&amp;size=2657769&amp;status=done&amp;style=none&amp;taskId=u7d15aece-ae2c-45a8-b77f-3483a1f559c&amp;width=601" data="aurora"></p><h3 id="fix勾选权限点击确定并应用" tabindex="-1"><a class="header-anchor" href="#fix勾选权限点击确定并应用" aria-hidden="true">#</a> fix勾选权限点击确定并应用</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632034327809-43ee7585-49ef-4278-a07d-323e30bd672c.png" data="aurora"> 第二步：进行接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632034447872-c33171bb-d1e1-4969-9b55-6608cc7bfeb1.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632034613392-cc582742-5277-4f22-9658-2f16cc963bec.gif#clientId=u184a7d3d-9f78-4&amp;from=ui&amp;id=u0437cc6f&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=917&amp;originWidth=1568&amp;originalType=binary&amp;ratio=1&amp;size=3028874&amp;status=done&amp;style=none&amp;taskId=uc17d70ed-1495-4fd5-bf7a-b35e5aeb56b" data="aurora"></p><h2 id="商品分类" tabindex="-1"><a class="header-anchor" href="#商品分类" aria-hidden="true">#</a> 商品分类</h2><h3 id="增加商品分类骨架" tabindex="-1"><a class="header-anchor" href="#增加商品分类骨架" aria-hidden="true">#</a> 增加商品分类骨架</h3><p>第一步：需要重新创建一个分支取名为：goods_cate <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126166125-1ddca0cc-cfbe-4cbb-9693-55b1734e7b12.png" data="aurora"> 第二步：在comments创建一个goods目录，创建Cate.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126258204-5e314210-b111-45f8-9107-0b310e7e123b.png" data="aurora"> 第三步：写基础骨架</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code>// Cate.vue
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        商品分类组件
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 生命周期函数</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 所有的事件处理函数</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br></div></div><p>第四步：在路由引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126405378-ed8840ae-f918-4e7a-8e66-b065f32eeef7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126422379-4f2e0d36-3e15-40df-8bf6-c854968f8a4d.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126475521-b3881f5b-ce9f-4204-9b9a-da1d167a000a.png" data="aurora"></p><h3 id="增加面包屑-按钮-卡片基础页面" tabindex="-1"><a class="header-anchor" href="#增加面包屑-按钮-卡片基础页面" aria-hidden="true">#</a> 增加面包屑/按钮/卡片基础页面</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632126988766-ac1c0680-8348-4e05-ab60-3ce8f35827b4.png" data="aurora"> 第二步：引入卡片视图 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632127032064-7e073c03-958b-46e3-ba12-ba0031f5aad3.png" data="aurora"> 第三步：引入button按钮 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632127061342-8f3a3bab-d255-4515-b541-9604bf35f533.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632127075453-3fa858c3-a615-4560-9f8a-97dd7430a4a9.png" data="aurora"></p><h3 id="获取商品分类后端数据" tabindex="-1"><a class="header-anchor" href="#获取商品分类后端数据" aria-hidden="true">#</a> 获取商品分类后端数据</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632128460815-a4861236-23f5-4cc5-9953-95e64dbd2e84.png" data="aurora"> 第二步：创建data数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632128559698-c0f53814-c921-4405-8675-22182f0c020e.png" data="aurora"> 第三步：创建生命周期 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632128532569-5aa11036-6f6a-41c9-b6a6-2332bfe97695.png" data="aurora"> 第四步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632128494643-c64e151d-0cbd-40cf-88b9-00c05a43e7c3.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632128753892-a9324913-c5a2-4b0d-b0b2-1f4673aefd0f.png" data="aurora"></p><h3 id="首次使用vue-table-with-tree插件" tabindex="-1"><a class="header-anchor" href="#首次使用vue-table-with-tree插件" aria-hidden="true">#</a> 首次使用Vue-table-with-tree插件</h3><p>第一步：安装插件 进入到vue ui中依赖--安装依赖---vue-table-with-tree-grid <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632150286353-d74fdd59-ecad-46c1-9530-1f60544e36da.png" data="aurora"> 第二步：在main.js引入插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632152501580-d9988d94-c7a6-485a-a8f9-fc7789fa9a66.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632152520330-991de7e9-6db7-4c61-b32e-ca3ced0d252c.png" data="aurora"> 第三步：运用插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632152878390-27feebec-17ab-454a-b415-60658610f20e.png" data="aurora"> data：指定绑定数据；columns：表格各列的配置；selection-type：关闭复选框 expand-type：关闭展开项；show-index：增加索引；index-text：索引名称；border：显示纵向边框；show-row-hover：鼠标悬停是否高亮 第四步：录入数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632153443114-0da1d9f9-7dc3-4f4b-a517-8a92de37f3ab.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632153461772-0dffe575-a5c8-4d4c-abe0-44e26910298a.png" data="aurora"></p><h3 id="美化表格" tabindex="-1"><a class="header-anchor" href="#美化表格" aria-hidden="true">#</a> 美化表格</h3><p>第一步：增加自定义模版列渲染，表格数据，定义插槽 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632211856879-4a0524a3-f585-47ee-a3eb-026c18764b1b.png" data="aurora"> 第二步：添加对应样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632211984181-1c503d8c-9122-43fd-8500-4469bd894086.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632212026888-ccb5c042-dc44-4433-97ca-a6e6738071be.png" data="aurora"></p><h3 id="新增排序-操作" tabindex="-1"><a class="header-anchor" href="#新增排序-操作" aria-hidden="true">#</a> 新增排序/操作</h3><p>第一步：增加自定义模版列渲染，表格数据，定义插槽 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632238569777-839897b0-16b5-4855-af26-ae80270cf255.png" data="aurora"> 第二步：添加对应样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632238627946-cc2ae1db-dfe1-4883-b2bb-0278a51cbc71.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632238664102-6a6fc8f9-6998-4a57-bd70-2e901bd94409.png" data="aurora"></p><h3 id="新增分页区域" tabindex="-1"><a class="header-anchor" href="#新增分页区域" aria-hidden="true">#</a> 新增分页区域</h3><p>第一步：引入Pagination分页(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632275953853-f676c616-f6b5-4ea1-a760-5ad7771bb88b.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632275996519-a4405a2b-5eb3-40f3-bfae-e2a5749190c1.png" data="aurora"> size-change：监听pagesize事件；current-change：监听pagenum事件；current-page：当前页；page-sizes：显示下拉条数；page-size：默认显示条数； total：总条数 第二步：在methods创建对应事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632276067405-9bb659c8-64aa-4737-9ed5-28c116aa872c.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632276961504-9f2d1d6c-ff25-4fbe-86ed-adc4bf469da5.png" data="aurora"></p><h3 id="新增添加分类弹出框" tabindex="-1"><a class="header-anchor" href="#新增添加分类弹出框" aria-hidden="true">#</a> 新增添加分类弹出框</h3><p>第一步：引入Dialog对话框(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632287103415-82a7867a-91d3-42b5-9eb2-cd91430afd3b.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632287284454-99add2f5-32d7-4c3b-8608-0178dc26d44b.png" data="aurora"> 第二步：在data中初始化该对话框为隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632287336551-0602c2b0-7607-4ca0-855b-8c799cb367fe.png" data="aurora"> 第三步：在添加分类button上增加一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632287387715-b421a0ce-df56-449d-8016-19f3b475e421.png" data="aurora"> 第四步：在methods中处理事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632287514144-e4e6260d-d72d-46e0-92b1-f97d26e2c42f.png" data="aurora"> 效果； <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632287577862-0b9ecf98-158f-4db2-a5e0-ece2b97151a1.gif#clientId=ud082b72b-84ac-4&amp;from=ui&amp;id=u6ba4166f&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=316&amp;originWidth=440&amp;originalType=binary&amp;ratio=1&amp;size=238932&amp;status=done&amp;style=none&amp;taskId=u0518c1f3-90a2-4cbd-bc83-477ecb1282a" data="aurora"></p><h3 id="新增添加分类数据" tabindex="-1"><a class="header-anchor" href="#新增添加分类数据" aria-hidden="true">#</a> 新增添加分类数据</h3><p>第一步：引入Form表单(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632322212554-51acfe78-8299-438e-9796-be0674e160be.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632322261526-97f69d56-3069-4108-86c2-c0f4b528926b.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632322556727-d767bd53-e019-464a-96a5-7955cac990a4.png" data="aurora"> 第三步：添加分类相关数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632322470282-734f62bf-5664-4a2f-997d-f59f4ad1297d.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632322594258-61b578f0-8ff4-40ee-ab65-5ff90a6801e7.png" data="aurora"></p><h3 id="获取商品分类数据列表" tabindex="-1"><a class="header-anchor" href="#获取商品分类数据列表" aria-hidden="true">#</a> 获取商品分类数据列表</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632323781990-ad024e01-eb67-4bac-a9ce-2e417140839c.png" data="aurora"> 第二步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632323756403-ade0471d-6255-4064-aa49-534077f72834.png" data="aurora"> 第三步：在data中定义一个接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632323844332-1d8875a5-552b-4322-acf8-584bc3c2b946.png" data="aurora"> 第四步：在点击添加分类按钮时进行触发 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632323914484-177234f5-1166-4805-b894-38395ba111f0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632324034998-03c5b9ce-ee37-42b3-b865-fb56dca4a622.gif#clientId=u3372a5b5-2012-4&amp;from=ui&amp;height=247&amp;id=uc9700267&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=494&amp;originWidth=1291&amp;originalType=binary&amp;ratio=1&amp;size=898219&amp;status=done&amp;style=none&amp;taskId=u3069ed1b-b6a9-4d26-8c33-b90279653c7&amp;width=646" data="aurora"></p><h3 id="新增父级分类下拉列表" tabindex="-1"><a class="header-anchor" href="#新增父级分类下拉列表" aria-hidden="true">#</a> 新增父级分类下拉列表</h3><p>第一步：引入Cascader级联选择器(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632408304361-aa729c9f-b8ed-4d2c-a09a-150908e21c86.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632408600856-decdb215-14cb-4058-a250-d4bf55ae901d.png" data="aurora"> 步骤二：进行数据绑定 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632408726651-bd493ef7-19e5-437f-9ee5-1bf5b7b34f39.png" data="aurora"> 第三步：在勾选选项的时候触发日志打印 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632408898144-dcb5169f-5fff-4837-9b19-c7f09308d8df.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632408991792-e56779ae-3411-46c7-9971-9e7b9f15f55f.png" data="aurora"> 第四步：进行组注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632409070962-242a5e9b-a4ea-48c8-9281-e332d8b97719.png" data="aurora"> fix下拉数据过多导致显示不全 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632409381258-117dab8c-3871-492e-8ded-17ed585f547a.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632410223031-9d02d2c4-81ba-43ce-974a-e9b3257650e8.gif#clientId=ua77f552a-5cf3-4&amp;from=ui&amp;id=u422b694b&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=713&amp;originWidth=1482&amp;originalType=binary&amp;ratio=1&amp;size=2062776&amp;status=done&amp;style=none&amp;taskId=u1544fd75-0d70-43c2-b0f2-84d729ef784" data="aurora"></p><h3 id="将分类名称数据绑定到父级分类中" tabindex="-1"><a class="header-anchor" href="#将分类名称数据绑定到父级分类中" aria-hidden="true">#</a> 将分类名称数据绑定到父级分类中</h3><p>第一步：进行数组length判断 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412366214-a405cbc8-8e81-4b80-b933-51ed62fa23cd.png" data="aurora"> 第二步：给确定按钮增加一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412645039-ee432512-37e7-412f-906c-a7d97de79185.png" data="aurora"> 第三步：日志打印 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412668142-285d330d-2372-4e71-a25f-3687240bdb90.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412162082-7ffee5ac-6d1b-4133-937d-13182585d4c9.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412223547-3821812a-116e-43e1-9749-2b142b58fd2c.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632412310089-1f1d3684-a1e6-4b04-b6be-2d31cc5a2f6c.png" data="aurora"></p><h3 id="添加分类关闭清空已选数据" tabindex="-1"><a class="header-anchor" href="#添加分类关闭清空已选数据" aria-hidden="true">#</a> 添加分类关闭清空已选数据</h3><p>第一步：新增一个close事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632448326489-3aa96463-c2c6-4870-b36e-98e2ed27707a.png" data="aurora"> 第二步：进行数据重置 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632448368583-a37ebd46-0570-4131-9814-a792f49722cb.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632448390616-76389f9d-115d-4ebe-8e86-a2c1d8255bb2.gif#clientId=ub24d2148-b30e-4&amp;from=ui&amp;id=uabf4de2b&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=257&amp;originWidth=436&amp;originalType=binary&amp;ratio=1&amp;size=461306&amp;status=done&amp;style=none&amp;taskId=u723a1148-d584-4978-b880-2f133b9c566" data="aurora"></p><h3 id="新增点击确定添加新的分类" tabindex="-1"><a class="header-anchor" href="#新增点击确定添加新的分类" aria-hidden="true">#</a> 新增点击确定添加新的分类</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632449139649-7ee79516-80b4-4cec-aa5d-83ee4cdca19f.png" data="aurora"> 第二步：调用接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632450062165-e134c756-36f7-44b4-9463-ee4df6b95b01.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632450483133-cb9dd9fb-ecd1-481c-98f0-4e7748fb1319.gif#clientId=ub24d2148-b30e-4&amp;from=ui&amp;id=ua980b20f&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=262&amp;originWidth=501&amp;originalType=binary&amp;ratio=1&amp;size=465510&amp;status=done&amp;style=none&amp;taskId=u73f5be7a-2df7-410d-b528-6de5de57427" data="aurora"></p><h3 id="后续补写编辑-删除功能" tabindex="-1"><a class="header-anchor" href="#后续补写编辑-删除功能" aria-hidden="true">#</a> 后续补写编辑/删除功能</h3><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632459397083-386cdc52-98b8-4680-9644-a7160e6a85ff.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632459412799-e4966f22-8729-46d2-aad9-e7fa90311079.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632459437965-46bbee92-99f6-4a43-81a4-ca5afc880337.png" data="aurora"></p><h2 id="分类参数" tabindex="-1"><a class="header-anchor" href="#分类参数" aria-hidden="true">#</a> 分类参数</h2><h3 id="增加分类参数骨架" tabindex="-1"><a class="header-anchor" href="#增加分类参数骨架" aria-hidden="true">#</a> 增加分类参数骨架</h3><p>第一步：需要重新创建一个分支取名为：goods_params <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632460966190-369f5ed6-3d23-4da2-92ad-339f4702621d.png" data="aurora"> 第二步：在goods目录创建Params.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632461037709-32cfc20a-c892-4718-9eda-c85e9d373e88.png" data="aurora"> 第三步：写基础骨架</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        分类参数
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>第四步：在路由引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632461142220-e0ec1124-da57-450e-bf8d-4ffeaeb6e08a.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632461160650-ab415d48-9cb4-41fd-b7a7-3fa98adbdd76.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632461217086-b23a6697-4654-4186-8979-677862c613e9.png" data="aurora"></p><h3 id="增加面包屑-警告框-卡片基础页面" tabindex="-1"><a class="header-anchor" href="#增加面包屑-警告框-卡片基础页面" aria-hidden="true">#</a> 增加面包屑/警告框/卡片基础页面</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492117418-0ea2c5a3-6958-4d02-9908-22504e920b77.png" data="aurora"> 第二步：引入卡片视图 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492150851-62eb2297-1e00-43b4-822d-a9d8d52becd5.png" data="aurora"> 第三步：引入alert组件(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492258730-3768e2ab-02f9-47bd-9678-863a90625e8f.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492332931-e8c7898a-0e04-4466-be2d-52af1a548576.png" data="aurora"> 第四步：进行组件注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492405277-2dabba32-f03e-469c-ad91-0fd4eb0e0d4e.png" data="aurora"> 第五步：增加商品分类 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492449009-ba31f09e-0492-474d-9882-4d1a10318055.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492469092-fa957ec9-ac76-48d2-9f70-7b964b0cfb07.png" data="aurora"></p><h3 id="商品分类数据获取" tabindex="-1"><a class="header-anchor" href="#商品分类数据获取" aria-hidden="true">#</a> 商品分类数据获取</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492877341-a5359d79-38a3-4d94-bd13-ec53d3dec3e5.png" data="aurora"> 第二步：调用接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492972689-4e16c9ca-fb93-4a19-985a-5da33d7dafc3.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632492997711-46805159-0388-4c68-a5c8-06064fec7e9c.png" data="aurora"></p><h3 id="商品分类的级联选择框" tabindex="-1"><a class="header-anchor" href="#商品分类的级联选择框" aria-hidden="true">#</a> 商品分类的级联选择框</h3><p>第一步：引入Cascader级联选择器(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632494560063-895d1055-f12e-46af-a753-e293672007c5.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632494629072-1f972002-550b-4968-8818-281ca2b08dce.png" data="aurora"> 第二步：在data中定义数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632494748520-36748b75-0f3d-4c27-91df-3de300df3220.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632494783667-710072da-fa3e-4a48-b5d6-81e3b9396498.png" data="aurora"> 第三步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632494807306-f051a7be-b0da-466c-9b41-c8ffba8b45e0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632494906755-cadb77b8-e038-41df-8be6-767f0641d2ef.gif#clientId=ub24d2148-b30e-4&amp;from=ui&amp;id=uc1dae479&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=514&amp;originWidth=972&amp;originalType=binary&amp;ratio=1&amp;size=590911&amp;status=done&amp;style=none&amp;taskId=u342761b3-21d6-4257-b641-f47c2fd0c69" data="aurora"></p><h3 id="fix不在同一水平面上展示" tabindex="-1"><a class="header-anchor" href="#fix不在同一水平面上展示" aria-hidden="true">#</a> fix不在同一水平面上展示</h3><p>在样式上添加属性： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632499652332-f7fa9118-62d6-4f63-99e4-a2bdc2bc11ec.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632499416458-157afd85-795f-4cd9-b7a3-072fb1d5852a.png" data="aurora"></p><h3 id="控制级联选择器的选择范围" tabindex="-1"><a class="header-anchor" href="#控制级联选择器的选择范围" aria-hidden="true">#</a> 控制级联选择器的选择范围</h3><p>第一步：获取selectedCateKeys的长度后进行判断 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632532095180-ff3d77ee-eb3f-4e52-834f-02d15a687e62.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632549190286-0e69dae2-8bbf-41bb-adb4-ed4b1c064feb.gif#clientId=u025672fd-4268-4&amp;from=ui&amp;id=u05db68a4&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=613&amp;originWidth=1193&amp;originalType=binary&amp;ratio=1&amp;size=917460&amp;status=done&amp;style=none&amp;taskId=uda352532-4110-4155-9002-1d9c941257c" data="aurora"></p><h3 id="新增动态参数-静态属性-tabs-标签页" tabindex="-1"><a class="header-anchor" href="#新增动态参数-静态属性-tabs-标签页" aria-hidden="true">#</a> 新增动态参数/静态属性 Tabs 标签页</h3><p>第一步：引入Tabs标签页(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632585014406-3b7c1627-a233-4678-9492-b2cabcab7f71.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632585051284-f1a8deb8-385f-472a-8590-02d5a695b942.png" data="aurora"> 第二步：在data中加入activeName参数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632585105505-5a1d7a0f-fd8c-459a-84b6-5ec033259b92.png" data="aurora"> 第三步：进行tabs页签点击事件处理函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632585152910-7300bdbf-423b-49df-839b-cd9d1f3c9e0a.png" data="aurora"> 第五步：注册组件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632585201108-9f275c1a-cc64-4cfd-b473-d9f434ef2e7a.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632585288894-fd2edee4-36ec-4f0f-bfe9-56c1c92ec8ae.gif#clientId=u025672fd-4268-4&amp;from=ui&amp;id=u6e490faa&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=613&amp;originWidth=1363&amp;originalType=binary&amp;ratio=1&amp;size=790135&amp;status=done&amp;style=none&amp;taskId=u7bef1910-05ae-4552-a10d-3d0953b76f7" data="aurora"></p><h3 id="新增添加按钮和属性-并控制禁用" tabindex="-1"><a class="header-anchor" href="#新增添加按钮和属性-并控制禁用" aria-hidden="true">#</a> 新增添加按钮和属性/并控制禁用</h3><p>第一步：新增button按钮 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632621374232-88cb4374-897b-41d0-9c60-af10c29448fa.png" data="aurora"> 第二步：新增一个计算属性(computed) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632621622409-27ec0fc5-2959-4479-806a-7d92b22434d4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632622232420-9bd4ca09-aced-4dbd-9ffe-431d0798b748.gif#clientId=ufbdf617d-38d4-4&amp;from=ui&amp;id=u136a907d&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=192&amp;originWidth=383&amp;originalType=binary&amp;ratio=1&amp;size=199067&amp;status=done&amp;style=none&amp;taskId=uaa63647b-2384-4d4f-ad31-797c477d331" data="aurora"></p><h3 id="获取参数列表" tabindex="-1"><a class="header-anchor" href="#获取参数列表" aria-hidden="true">#</a> 获取参数列表</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632637848866-7feadc64-0d5e-4103-854b-38f215f64693.png" data="aurora"> 第二步：在computed创建一个函数获取到三级分类的id <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632638310901-36997c7a-3388-4486-8f1a-daf9ba8afb90.png" data="aurora"> 第三步：接口调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632638073381-c0de4eb6-e4a8-4587-bb83-d2a71de63555.png" data="aurora"> 第四步：更改tabs标签页中的name <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632638202394-9112544e-1816-451e-98cd-1b82e8493ea7.png" data="aurora"> 第五步：更改被激活的页签名称 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632638240014-4b9af517-09be-4ab0-88ef-93d5e9aa9635.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632665195483-3433ff10-7bf3-48a3-aadb-b14a083aa79b.gif#clientId=ufbdf617d-38d4-4&amp;from=ui&amp;id=u7be6b7f5&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=316&amp;originWidth=934&amp;originalType=binary&amp;ratio=1&amp;size=345722&amp;status=done&amp;style=none&amp;taskId=u548a3ce0-c125-4b0f-a94e-5f52d818ddc" data="aurora"></p><h3 id="fix切换标签没有重新进行请求" tabindex="-1"><a class="header-anchor" href="#fix切换标签没有重新进行请求" aria-hidden="true">#</a> fix切换标签没有重新进行请求</h3><p>第一步：将handleChange中的数据抽离出来，创建一个getParamsData函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632665921417-992972bd-7579-4cfa-bf54-0e6287044b73.png" data="aurora"> 第二步：单独添加该函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632665990208-09c0096f-7605-4848-b2f1-72eb99d678aa.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632666117636-47595991-cd4a-4710-a4f3-86eff23429f0.gif#clientId=ufbdf617d-38d4-4&amp;from=ui&amp;id=u9fcb82e5&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=478&amp;originWidth=1415&amp;originalType=binary&amp;ratio=1&amp;size=1235800&amp;status=done&amp;style=none&amp;taskId=u54dbf499-7b9a-49e2-87e6-8172e1a60b6" data="aurora"></p><h3 id="动态参数表格和静态参数表格渲染" tabindex="-1"><a class="header-anchor" href="#动态参数表格和静态参数表格渲染" aria-hidden="true">#</a> 动态参数表格和静态参数表格渲染</h3><p>第一步：在data中定义空数组 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632667851771-a863463e-368a-43f9-a24c-f1228ca91277.png" data="aurora"> 第二步：进行判断数据属于哪个标签 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632667793510-471a78c2-b40c-44f4-8abd-af2a83dbf602.png" data="aurora"> 第三步：进行表格渲染 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632667945214-37c4711a-6ad7-43ee-bc07-57020fe76f35.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632667987118-c02016a1-4848-4b89-a77c-b53f049eff93.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632668096243-025e61df-1333-48d5-8700-04270d7de101.gif#clientId=ufbdf617d-38d4-4&amp;from=ui&amp;id=uf64e67be&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=670&amp;originWidth=1425&amp;originalType=binary&amp;ratio=1&amp;size=1154950&amp;status=done&amp;style=none&amp;taskId=u3ab13ce4-30bf-44be-899b-314446ca09d" data="aurora"></p><h3 id="新增添加参数-属性对话框-form表单校验" tabindex="-1"><a class="header-anchor" href="#新增添加参数-属性对话框-form表单校验" aria-hidden="true">#</a> 新增添加参数/属性对话框/form表单校验</h3><p>在添加参数按钮新增一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632753959601-2b2f11dd-1f0a-4ecc-afb6-09cde4ab09e3.png" data="aurora"> 第一步：引入Dialog对话框(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707184604-36aeb88c-2141-4a16-a420-9f0cbc1f0ab2.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707314260-0bc61679-0ee3-481d-b283-9b259682e028.png" data="aurora"> 第二步：在data中定义对话框默认隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707382551-f89da5c8-46c0-4dcc-88ec-4358d5873d50.png" data="aurora"> 第三步：在computed中新增titleText达到对话框titile赋值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707471108-81fe29ee-4983-46ea-b3d6-9be2a6d2ea21.png" data="aurora"> 第四步：引入Form表单(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707664742-740be28b-74a3-4b17-a711-549aca4d8b7c.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707683539-4788b5f0-2b74-4c3c-9837-23f7a1ca68e0.png" data="aurora"> 第五步：在data中新增属性 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707755839-8aa3b856-6bfd-4de2-9183-f62936874117.png" data="aurora"> 第六：监听添加对话框的关闭事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707874862-673f9489-7fea-4577-ad3a-2b9dd4cbaf58.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632708471814-8631729f-d552-4d3a-b3a1-37c6a857acdd.gif#clientId=ue790f230-7ce7-4&amp;from=ui&amp;id=u1cc6daea&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=642&amp;originWidth=868&amp;originalType=binary&amp;ratio=1&amp;size=1698046&amp;status=done&amp;style=none&amp;taskId=ub0d00dd4-db68-4b83-9072-848350cc536" data="aurora"></p><h3 id="新增点击确定添加动态参数或静态属性" tabindex="-1"><a class="header-anchor" href="#新增点击确定添加动态参数或静态属性" aria-hidden="true">#</a> 新增点击确定添加动态参数或静态属性</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632719628869-5b1a8729-7c1f-4939-8a10-0600db5822a9.png" data="aurora"> 第二步：在确定按钮上新增click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632719683237-12b9b8e0-4e4a-4e70-bde7-cb42834dba15.png" data="aurora"> 第三步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632719780999-5d5b46ce-c104-4141-a64b-7e7b7dadfa75.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632719977964-1ee2fb4c-fe18-4735-987d-61007c9825d7.gif#clientId=ue790f230-7ce7-4&amp;from=ui&amp;id=u5bfc6b68&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=243&amp;originWidth=444&amp;originalType=binary&amp;ratio=1&amp;size=1019326&amp;status=done&amp;style=none&amp;taskId=ude843c3f-ec0c-4b32-9778-77b83399c3f" data="aurora"></p><h3 id="新增编辑功能" tabindex="-1"><a class="header-anchor" href="#新增编辑功能" aria-hidden="true">#</a> 新增编辑功能</h3><p>在编辑按钮增加一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632753810133-7b87fede-0eb7-46e9-ae19-e9b25a01dcc5.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707184604-36aeb88c-2141-4a16-a420-9f0cbc1f0ab2.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632753859810-1037f474-394b-4dc9-b33e-92a6c74fe443.png" data="aurora"> 第二步：在data中定义对话框默认隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632754083641-81661c0f-ed3f-4d73-8f79-8f5fad2774b6.png" data="aurora"> 第三步：引入Form表单(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632707664742-740be28b-74a3-4b17-a711-549aca4d8b7c.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632754249251-d56a6c2e-6142-421d-95b1-da4f07e7e0e1.png" data="aurora"> 第四步：在data中新增属性 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632754299959-c18bfc8b-48e1-4bbf-ba95-4d04ab69444e.png" data="aurora"> 第五步：关闭对话框进行重置 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632754474794-8e1420dd-c870-41b2-904f-1933c8c97c0d.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632754745420-39038508-9643-4d0c-9acb-8a3dbfebdf17.gif#clientId=ue790f230-7ce7-4&amp;from=ui&amp;id=u512b0cde&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=503&amp;originWidth=1208&amp;originalType=binary&amp;ratio=1&amp;size=2067927&amp;status=done&amp;style=none&amp;taskId=ue03ad5d7-d4b2-43e0-9246-3e0b54dfbb2" data="aurora"></p><h3 id="获取动态参数值" tabindex="-1"><a class="header-anchor" href="#获取动态参数值" aria-hidden="true">#</a> 获取动态参数值</h3><p>采用作用域插槽进行attr_id获取 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632756782962-25b3ae2d-56d1-4bcd-b343-1665879b8221.png" data="aurora"> 第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632756390986-a1fb0da9-99c0-4082-9560-e18f51e0bfa0.png" data="aurora"> 第二步：调用接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632757009113-2845ca88-99ca-4d54-a0f2-676625696600.png" data="aurora"> 效果：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632757132845-9f77dd77-580f-4139-b70a-bdae4083c9e2.gif#clientId=ue790f230-7ce7-4&amp;from=ui&amp;id=u2c50cbd3&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=503&amp;originWidth=1208&amp;originalType=binary&amp;ratio=1&amp;size=1577022&amp;status=done&amp;style=none&amp;taskId=u491f3a8a-9831-437e-8621-ab5fe4f21be" data="aurora"></p><h3 id="新增修改属性值" tabindex="-1"><a class="header-anchor" href="#新增修改属性值" aria-hidden="true">#</a> 新增修改属性值</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632792898292-92a3cc90-0706-4828-b8be-141b3e2b355b.png" data="aurora"> 第二步：调用接口<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632793050841-61e440ac-eeec-48c2-b196-54bee76dba5c.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632793157186-782eb204-5510-4708-8196-454057bf98bd.gif#clientId=uf2ff777f-dcf1-4&amp;from=ui&amp;id=u973a5e7b&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=318&amp;originWidth=426&amp;originalType=binary&amp;ratio=1&amp;size=270276&amp;status=done&amp;style=none&amp;taskId=u0a988ab1-99f2-439a-a0ad-9b59bc71c51" data="aurora"></p><h3 id="新增删除功能" tabindex="-1"><a class="header-anchor" href="#新增删除功能" aria-hidden="true">#</a> 新增删除功能</h3><p>在删除按钮新增一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632794478334-0321a547-5d76-4541-9439-c59584329690.png" data="aurora"> 第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632794409197-6edbd1b5-39a1-49cb-9359-99a845fab44d.png" data="aurora"> 第二步：接口调用 引入MessageBox弹框(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632794707710-9fa1af17-b925-42f7-8b23-d8e0eaa008c7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632794632288-b5e65a96-8c15-4598-9b74-236c54d4ec96.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632794812484-ba22acf6-d1ee-4a6b-90a8-0aecc4232051.gif#clientId=uf2ff777f-dcf1-4&amp;from=ui&amp;id=u564908fa&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=481&amp;originWidth=461&amp;originalType=binary&amp;ratio=1&amp;size=320160&amp;status=done&amp;style=none&amp;taskId=ud1c3fb60-d1a7-4833-8931-6a6d990d318" data="aurora"></p><h3 id="新增展开页标签" tabindex="-1"><a class="header-anchor" href="#新增展开页标签" aria-hidden="true">#</a> 新增展开页标签</h3><p>第一步：将数据进行分割重组 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632892468930-3a26613f-6bbc-4afd-9e91-8d776910ff62.png" data="aurora"> 第二步：在展开行新增tag标签页，for循环 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632892510891-18cdc6cb-e75f-40e3-9b83-71d7e0b9a73f.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632892630185-07f0bbe6-bf2e-4946-934c-b612b3b7d8cb.gif#clientId=u6c6f4a9a-e886-4&amp;from=ui&amp;id=ua708f490&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=349&amp;originWidth=1132&amp;originalType=binary&amp;ratio=1&amp;size=337336&amp;status=done&amp;style=none&amp;taskId=u91953fdc-b1db-43cb-b614-47053749722" data="aurora"></p><h3 id="新增new-tags" tabindex="-1"><a class="header-anchor" href="#新增new-tags" aria-hidden="true">#</a> 新增New Tags</h3><p>第一步：引入New Tags(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632928218315-e53d4b61-adb0-40e7-b29a-e7d3739fc109.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632928648108-42b1cd53-2445-4fa2-8340-061e671203d3.png" data="aurora"> 第二步：在data中定义相关初始值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632928672582-9f8d6996-114b-4149-80ca-63dbc30fd4e1.png" data="aurora"> 第三步：在methods中定义方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632928781694-ad5b15ad-fb9c-43e9-9d4c-2984d193d701.png" data="aurora"> 第四步：修改下宽度 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632928808999-d149c9d6-2e5f-440c-bcca-b3d574d73230.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632928882973-998c8cad-01f9-42e9-9ef3-c859440fbcff.gif#clientId=uffd7a17a-1588-4&amp;from=ui&amp;id=u3c0f4298&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=468&amp;originWidth=1449&amp;originalType=binary&amp;ratio=1&amp;size=861406&amp;status=done&amp;style=none&amp;taskId=uc2c68d61-4a4e-4901-9dc8-50a7b1bb3de" data="aurora"></p><h3 id="fix修改new-tags-数据-关联到其他new-tags" tabindex="-1"><a class="header-anchor" href="#fix修改new-tags-数据-关联到其他new-tags" aria-hidden="true">#</a> fix修改New Tags 数据 关联到其他New Tags</h3><p>第一步：找到获取参数列表的方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632930814648-0a8daee8-1412-42de-885c-751ba1bfd148.png" data="aurora"> 每一行数据都有自己的bool和value 第二步：使用作用域插槽指定数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632931118886-0879f9c4-c626-4257-8117-94e2777f2a65.png" data="aurora"> 第三步：删除data中定义相关初始值 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632931299191-1c10fa70-23ef-4acf-a60f-0a6f27111b74.png" data="aurora"> 第四步：在click事件中传入scope.row <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632931401533-3efbc70a-3100-483a-9bcc-90b0262d962d.png" data="aurora"> 第五步：在函数的形参中传入row <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632931582144-c43bb9c5-9167-4fb1-96de-f4328d8bed7e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632931663746-731c381d-c265-4e5e-bd61-1f84e0d45d1b.gif#clientId=uffd7a17a-1588-4&amp;from=ui&amp;id=u3f1a0067&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=440&amp;originWidth=1042&amp;originalType=binary&amp;ratio=1&amp;size=422965&amp;status=done&amp;style=none&amp;taskId=u10a9f078-1d63-4a37-b1a2-a1063cccb29" data="aurora"></p><h3 id="fix点击new-tags-自动获取焦点" tabindex="-1"><a class="header-anchor" href="#fix点击new-tags-自动获取焦点" aria-hidden="true">#</a> fix点击New Tags 自动获取焦点</h3><p>第一步：引入New Tags获取焦点(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632996149992-ff401af1-e18a-498d-8d13-cda7be7402c4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632996355785-a57f003c-c156-4132-aa74-cde023dc381b.gif#clientId=u4602868a-2718-4&amp;from=ui&amp;id=u95a69992&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=200&amp;originWidth=844&amp;originalType=binary&amp;ratio=1&amp;size=115688&amp;status=done&amp;style=none&amp;taskId=ua8f272c8-b767-4645-a2fd-f7d2c353316" data="aurora"></p><h3 id="fix失去焦点文本框与按钮切换" tabindex="-1"><a class="header-anchor" href="#fix失去焦点文本框与按钮切换" aria-hidden="true">#</a> fix失去焦点文本框与按钮切换</h3><p>第一步：在属性框增加scope.row <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632998024912-3ea4e8b3-fca1-4f84-bd48-ef5e12d1a6dc.png" data="aurora"> 第二步：失去焦点后，从input过度到tags <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1632998045552-21d9c48d-34c9-49c6-9bc6-bd2e9fac441e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1632998210742-5ecf206d-98f2-46e8-be97-37d6b7791e20.gif#clientId=u4602868a-2718-4&amp;from=ui&amp;id=u7a38ab7d&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=190&amp;originWidth=510&amp;originalType=binary&amp;ratio=1&amp;size=134535&amp;status=done&amp;style=none&amp;taskId=ud858a535-13ba-44f2-87fa-16bbd016faf" data="aurora"></p><h3 id="fix判断用户是否输入无效字符-空格-进行重置" tabindex="-1"><a class="header-anchor" href="#fix判断用户是否输入无效字符-空格-进行重置" aria-hidden="true">#</a> fix判断用户是否输入无效字符(空格)进行重置</h3><p>第一步：进行输入值长度判断 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633011931807-7e4cf7c6-72eb-4ac6-b504-f42272267857.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633012077710-c1306a80-abe3-432a-b606-1c2be9a90494.gif#clientId=u4602868a-2718-4&amp;from=ui&amp;id=u0ee1f030&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=640&amp;originWidth=2024&amp;originalType=binary&amp;ratio=1&amp;size=384863&amp;status=done&amp;style=none&amp;taskId=ub6305d91-7575-4ed6-ab28-7c393d8fdb4" data="aurora"></p><h3 id="新增添加tags到数据库操作" tabindex="-1"><a class="header-anchor" href="#新增添加tags到数据库操作" aria-hidden="true">#</a> 新增添加tags到数据库操作</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633013355399-194fff36-936e-4e40-9995-919484962d75.png" data="aurora"> 第二步：调用接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633013409695-a3681ad4-df70-46cb-b78a-fdf283fba5cb.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633013587274-56f2ec63-9c8e-4fa7-8755-9da3e6b31db2.gif#clientId=u4602868a-2718-4&amp;from=ui&amp;id=ud7518e48&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=429&amp;originWidth=933&amp;originalType=binary&amp;ratio=1&amp;size=957322&amp;status=done&amp;style=none&amp;taskId=u063e6667-f7ed-4efc-8cf9-ee976470910" data="aurora"></p><h3 id="新增删除tag标签" tabindex="-1"><a class="header-anchor" href="#新增删除tag标签" aria-hidden="true">#</a> 新增删除tag标签</h3><p>第一步：在tags中增加close事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633014859510-4db30b15-01b0-400c-a4ee-5f349ba22427.png" data="aurora"> 第二步：将添加tags到数据库的方法单独封装一下 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633014985938-798ae622-adea-4d3d-8524-9e8966010b72.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633015088962-90b5c809-613b-4710-9f2f-5e93ca56049c.png" data="aurora"> 第三步：删除对应参数可选项 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633015159424-10d6d025-1660-467d-97a7-edc3583cf837.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633015307783-6a73d89f-412d-455e-a674-25838cb6868a.gif#clientId=u4602868a-2718-4&amp;from=ui&amp;id=uc8c4291e&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=551&amp;originWidth=1065&amp;originalType=binary&amp;ratio=1&amp;size=1265485&amp;status=done&amp;style=none&amp;taskId=u738b3573-dbce-45b8-9919-2ded89549da" data="aurora"></p><h3 id="fix选择三级分类后再选择二级分类数据依旧存在" tabindex="-1"><a class="header-anchor" href="#fix选择三级分类后再选择二级分类数据依旧存在" aria-hidden="true">#</a> fix选择三级分类后再选择二级分类数据依旧存在</h3><p>第一步：<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633145079905-3cb35a94-3805-41df-b2f6-993fcb320abe.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633145191861-ea56c696-23cf-4382-9e74-daa339d7c577.gif#clientId=u1c3b76c5-7f92-4&amp;from=ui&amp;id=u435de2a0&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=730&amp;originWidth=1716&amp;originalType=binary&amp;ratio=1&amp;size=2439807&amp;status=done&amp;style=none&amp;taskId=ud0000a37-7d49-40f3-9109-f884bfa995d" data="aurora"></p><h2 id="商品列表" tabindex="-1"><a class="header-anchor" href="#商品列表" aria-hidden="true">#</a> 商品列表</h2><h3 id="增加商品列表参数骨架" tabindex="-1"><a class="header-anchor" href="#增加商品列表参数骨架" aria-hidden="true">#</a> 增加商品列表参数骨架</h3><p>第一步：需要重新创建一个分支取名为：goods_list <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633248325500-add9668e-c44f-4d39-b2b8-e461ddf56405.png" data="aurora"> 第二步：在goods目录创建List.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633248429607-ea19dbbc-6f06-4446-bfbc-4ddb3455b8b8.png" data="aurora"> 第三步：写基础骨架</p><div class="language-vue ext-vue line-numbers-mode"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
        商品列表
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>less<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br></div></div><p>第四步：在路由引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633248468050-e88c8b51-a97d-4a05-8582-2b3ac5315344.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633248487535-0afd3195-0975-4fcf-9d1a-9e854bdcbd83.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633248521386-83e8bcfd-7fff-410e-8be1-eba9b5f734db.png" data="aurora"></p><h3 id="增加面包屑-输入框-按钮" tabindex="-1"><a class="header-anchor" href="#增加面包屑-输入框-按钮" aria-hidden="true">#</a> 增加面包屑/输入框/按钮</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633249246272-385a478f-55f8-40e7-b435-d1bc94743fc3.png" data="aurora"> 第二步：引入卡片视图 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633249268550-0a9001ca-f2cc-447b-a831-75f79f563484.png" data="aurora"> 第三步：引入输入框/按钮 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633249313346-7478ab73-e674-4d42-88dc-eb71675a42bb.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633249479530-42c57161-bd7b-4973-8eb5-c9c45953a7cf.png" data="aurora"></p><h3 id="商品列表数据获取" tabindex="-1"><a class="header-anchor" href="#商品列表数据获取" aria-hidden="true">#</a> 商品列表数据获取</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633250868408-e42e0ddf-1b27-4d54-98af-a3cad692f92a.png" data="aurora"> 第二步：定义参数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633250943477-062489ef-e39d-478c-bd59-1b716097391d.png" data="aurora"> 第三步：接口调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633250972104-f3356488-007c-4ff2-bbf2-e9dce240ef80.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633251078211-b01c36ae-fe56-4d4e-bfa5-66bc556ee17f.png" data="aurora"></p><h3 id="新增表格区域数据渲染" tabindex="-1"><a class="header-anchor" href="#新增表格区域数据渲染" aria-hidden="true">#</a> 新增表格区域数据渲染</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633252068828-85c6cf7f-6fb6-421a-aae4-dc2c4e7a22de.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633252101629-2eded933-d8c7-43aa-8e8b-f6e88464417e.png" data="aurora"></p><h3 id="fix创建时间未格式化" tabindex="-1"><a class="header-anchor" href="#fix创建时间未格式化" aria-hidden="true">#</a> fix创建时间未格式化</h3><p>第一步：全局定义格式化时间的过滤器 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633315292592-51d753c6-c8ae-48b6-af5e-d0641c210590.png" data="aurora"> 第二步：进行调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633315327688-bc5e6ccc-26cf-4ad5-880e-a2458056fc50.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633315774332-dcd9a44a-8aa3-448f-ac05-a224d800244a.png" data="aurora"></p><h3 id="新增分页标签功能" tabindex="-1"><a class="header-anchor" href="#新增分页标签功能" aria-hidden="true">#</a> 新增分页标签功能</h3><p>第一步：引入Pagination分页(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633317833539-ebdcdfbe-9caf-4aae-b486-d8b78e559e0e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633317910636-b0ed2013-94c7-4d8f-b466-adc53c72ab41.png" data="aurora"> 第二步：创建方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633317968980-0f916f60-3c21-404a-b43f-483c29337a75.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633318089431-a785e4cf-2b2e-48f1-953e-68d68a6cfd70.gif#clientId=uca6db27c-8bbd-4&amp;from=ui&amp;id=ub7edac4b&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=645&amp;originWidth=1512&amp;originalType=binary&amp;ratio=1&amp;size=6080214&amp;status=done&amp;style=none&amp;taskId=u75214a38-5bca-486c-9c16-5a463c6468b" data="aurora"></p><h3 id="新增搜索-清空功能" tabindex="-1"><a class="header-anchor" href="#新增搜索-清空功能" aria-hidden="true">#</a> 新增搜索/清空功能</h3><p>第一步：在input输入框增加数据绑定，清空，清空触发功能 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633318515960-5ecc9c49-ebed-4479-aa4d-4242cc7dea8e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633318755858-bc4b7c28-b45e-4eb3-8e49-9e0614579b31.gif#clientId=uca6db27c-8bbd-4&amp;from=ui&amp;id=u8dc55292&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=606&amp;originWidth=836&amp;originalType=binary&amp;ratio=1&amp;size=1732072&amp;status=done&amp;style=none&amp;taskId=ue11b290f-4ef0-4d89-9d68-a3a63892d8d" data="aurora"></p><h3 id="新增删除功能-1" tabindex="-1"><a class="header-anchor" href="#新增删除功能-1" aria-hidden="true">#</a> 新增删除功能</h3><p>第一步：在删除按钮上新增click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633320010276-a36b61d3-6b4d-4c71-b788-69ed1cc0c4b1.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633320046237-d1d65a90-89a0-497b-9bc2-50f2705eeb77.png" data="aurora"> 第三步：调用接口文档 引入MessageBox弹框(element-ui提供了方法) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633320127749-4b094589-12de-4d39-836d-7af496b38e69.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633320201757-5da64e92-0e98-4042-8088-c313576e216e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633411827214-66b1cbbc-cddd-411b-a0bb-02e642aecee5.gif#clientId=u65dd1d8b-37c9-4&amp;from=ui&amp;height=369&amp;id=ubda99852&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=738&amp;originWidth=1539&amp;originalType=binary&amp;ratio=1&amp;size=6312167&amp;status=done&amp;style=none&amp;taskId=u801f5869-e47c-4523-8830-008d485be37&amp;width=770" data="aurora"></p><h3 id="新增添加商品单独页面" tabindex="-1"><a class="header-anchor" href="#新增添加商品单独页面" aria-hidden="true">#</a> 新增添加商品单独页面</h3><p>第一步：在添加商品新增一个click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633411929756-e144aeef-63e9-43cc-bdb6-605bf34c8b8a.png" data="aurora"> 第二步：在methods写一个路由跳转的方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633412075672-697f7bfb-1c73-4213-ba74-f132695e6905.png" data="aurora"> 第三步：新增一个Add.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633412536750-017e2e95-06ff-45dc-87d2-1a9a50e1220b.png" data="aurora"> 第四步：编写Add.vue骨架 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="code.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633412674051-faff22a3-cfe7-49e2-b920-b02696692c08.png" data="aurora"> 第五步：在index.js注册该路由 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633412751902-b2511e4a-56a3-4908-ab50-865432b3425f.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633412905897-c2b07844-a3fb-4c82-986c-54673719b738.gif#clientId=u65dd1d8b-37c9-4&amp;from=ui&amp;id=u379893a3&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=527&amp;originWidth=1097&amp;originalType=binary&amp;ratio=1&amp;size=500301&amp;status=done&amp;style=none&amp;taskId=uda609ba3-7de5-4502-acb0-ba38c0ff801" data="aurora"></p><h3 id="新增添加商品" tabindex="-1"><a class="header-anchor" href="#新增添加商品" aria-hidden="true">#</a> 新增添加商品</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633420847879-658344be-2e39-43e9-a5d4-243cc209343f.png" data="aurora"> 第二步：引入卡片 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633420912712-b4927bb7-340e-4ae5-8dc9-0a8fc9eab98d.png" data="aurora"> 第三步：引入Alert警告(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633422384434-f5ec45a3-80ef-44a2-9919-d25a6dfebb3a.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633422448084-8eb72058-ac43-4897-a846-84888303fbf9.png" data="aurora"> 第三步：引入Steps步骤条(elementui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633421975547-2c7cae38-71d0-4acb-a332-fb207f895cb0.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633422170252-97739436-dc36-4a85-80ee-711de5f34b0a.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633572586104-4f5bceaa-b3ee-4d5b-900c-3dde0c9266da.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633572603639-fa39a554-9a49-45ec-ac1c-d433f5255156.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633422201278-5f5a877c-276a-46c9-849c-4cfa01a29a34.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633422611417-7caca04f-0c36-4b2c-b24a-14ab4ec86321.png" data="aurora"></p><h3 id="新增tabs栏渲染" tabindex="-1"><a class="header-anchor" href="#新增tabs栏渲染" aria-hidden="true">#</a> 新增tabs栏渲染</h3><p>第一步：引入Tabs标签页(element ui给了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633573052062-2fb87f6e-f7fc-40de-a2df-f45d4f4c6b04.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633573111824-4279eb83-6b3c-41c9-a1b5-271d2ee85dd2.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633573133531-06b8ccac-796a-4c00-8016-86164ddb3533.png" data="aurora"></p><h3 id="新增步骤条与tab栏数据联动效果" tabindex="-1"><a class="header-anchor" href="#新增步骤条与tab栏数据联动效果" aria-hidden="true">#</a> 新增步骤条与tab栏数据联动效果</h3><p>第一步：新增name索引值、v-model数据绑定 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633575036778-16bc2663-82ac-4156-a41c-64a901b504e8.png" data="aurora"> 第二步：长得像数字的字符串 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633575082187-e502bacd-9c60-446d-8951-b024c8697397.png" data="aurora"> 第三步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633575183617-cd4678b1-8ee0-4294-876b-147484b264d4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633575276059-5fae6b79-aa04-459d-87b7-524c348a7a52.gif#clientId=ucb5dd152-213b-4&amp;from=ui&amp;id=ubf3f408c&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=372&amp;originWidth=1197&amp;originalType=binary&amp;ratio=1&amp;size=387923&amp;status=done&amp;style=none&amp;taskId=u3f59d8d7-a4c0-43d2-9c16-11bc81c8e6b" data="aurora"></p><h3 id="新增商品基本信息绘制" tabindex="-1"><a class="header-anchor" href="#新增商品基本信息绘制" aria-hidden="true">#</a> 新增商品基本信息绘制</h3><p>第一步：引入Form表单、表格校验 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633577438183-d75d2d4c-ddcc-4263-93fe-b02d3cd6b163.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633577522513-6ee6f026-6e4c-40d7-8f8c-c824973fb930.png" data="aurora"> 第二步：加入校验规则 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633577575008-79fa41ba-b368-4348-a429-fa2f5da690b0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633577645920-0e7abb94-c9b6-4f8d-8e08-107a8d0d129d.gif#clientId=ucb5dd152-213b-4&amp;from=ui&amp;id=u9b63e56a&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=648&amp;originWidth=1530&amp;originalType=binary&amp;ratio=1&amp;size=808126&amp;status=done&amp;style=none&amp;taskId=uf110f562-e64a-4108-9874-73db90727ed" data="aurora"></p><h3 id="商品分类的数据获取" tabindex="-1"><a class="header-anchor" href="#商品分类的数据获取" aria-hidden="true">#</a> 商品分类的数据获取</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633612128447-6a23e591-8dbd-41b0-a2b1-1bb5fb209a63.png" data="aurora"> 第二步：创建声明周期函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633612214127-543823bf-ebb9-4dea-a4fa-7a4cd6a0fab3.png" data="aurora"> 第三步：调用接口函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633612280190-c0604b63-efa3-4ef4-ad2d-8f109b2f5596.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633612430869-6f0f986d-2939-4ea9-9279-602d593ccbcd.png" data="aurora"></p><h3 id="新增商品列表级联选择器" tabindex="-1"><a class="header-anchor" href="#新增商品列表级联选择器" aria-hidden="true">#</a> 新增商品列表级联选择器</h3><p>第一步：引入级联选择器 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633614257343-9c70432b-8b02-4089-97e5-c3a3a6f39e93.png" data="aurora"> 第二步：在addForm新增一个goods_cat接收数据和校验<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633614485245-53a734ab-6a6c-4438-b8b4-ed0e11a45372.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633614514456-9f669c06-0189-4e66-a59a-3ca7ba16f932.png" data="aurora"> 第三步：级联选择器数据 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633614561201-2f61e504-8cf2-460e-9bf2-5b9631a6aef5.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633614990303-1be22d24-65ce-4bcf-b028-98e44b6cfea4.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633615064718-a18cb0aa-c7b6-4ef7-a1b2-8cf783437750.gif#clientId=ude29f9ad-b49b-4&amp;from=ui&amp;id=uab9d55b2&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=789&amp;originWidth=1530&amp;originalType=binary&amp;ratio=1&amp;size=1498405&amp;status=done&amp;style=none&amp;taskId=u2fb1db94-b988-489f-9a87-262f3005c38" data="aurora"></p><h3 id="控制tabs标签切换" tabindex="-1"><a class="header-anchor" href="#控制tabs标签切换" aria-hidden="true">#</a> 控制Tabs标签切换</h3><p>第一步：使用element ui 提供函数 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633617307693-572d08f8-cb79-495e-962c-3bb925680981.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633617377720-d8d0d149-19e8-4f5c-8a7f-9e0694d8fe15.png" data="aurora"> 第二步：判断是不是选中第一个tabs标签或是否选择了3级选择 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633617429059-7c2e037f-870c-4c16-b6ea-8f92c6b6a649.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633617843772-f2be25f8-3475-4ed8-acc3-882472af4a29.gif#clientId=ude29f9ad-b49b-4&amp;from=ui&amp;id=u202b9213&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=817&amp;originWidth=1550&amp;originalType=binary&amp;ratio=1&amp;size=1521948&amp;status=done&amp;style=none&amp;taskId=uc83d6b2d-d951-4c5e-8f1c-52dd1bba2a3" data="aurora"></p><h3 id="商品参数面板对应数据获取" tabindex="-1"><a class="header-anchor" href="#商品参数面板对应数据获取" aria-hidden="true">#</a> 商品参数面板对应数据获取</h3><p>第一步：新增tab被选中时触发(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633658844128-5f74f92d-e291-46d4-b2de-b8cd30ff3aba.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633658911062-3d84ab0b-523d-4c4b-a5f4-f5865c96fb88.png" data="aurora"> 第二步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633659030367-6747d838-4e2c-4df1-a88e-0958af1863db.png" data="aurora"> 第三步：判断激活面板是否等于1、接口调用 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633659343489-23b1c331-46d8-4322-b832-b0db0ffb0cda.png" data="aurora"> 第四步：请求成功后保存到manyTableData <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633659423424-46186dc6-d146-455f-a07a-8f705943c452.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633659908709-2be93c76-4bcb-451d-9297-5f862c8b06fa.gif#clientId=ufe7f622c-51ee-4&amp;from=ui&amp;id=u5a9e736c&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=924&amp;originWidth=740&amp;originalType=binary&amp;ratio=1&amp;size=963474&amp;status=done&amp;style=none&amp;taskId=uf285a6f9-e723-4c69-91ac-191c68f5efd" data="aurora"></p><h3 id="新增商品参数面板绘制" tabindex="-1"><a class="header-anchor" href="#新增商品参数面板绘制" aria-hidden="true">#</a> 新增商品参数面板绘制</h3><p>第一步：在tab被选中时触发<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633661876387-9ec3ec68-75d8-4d37-aaf0-4e5c63077620.png" data="aurora"> 第二步：引入复选框(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633661989689-87cf0907-e9ce-435b-bc55-1fd2d005a39d.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633662028959-e3637cc4-d560-4a43-a417-c69feb0d89b4.png" data="aurora"> 第三步：进行组件注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633662101935-36bc4ec0-5864-40da-8435-0824da5145c7.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633662237199-18b09ae6-8bb1-4e6c-b0df-84b8fda9060e.gif#clientId=ufe7f622c-51ee-4&amp;from=ui&amp;id=ufe94babe&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=715&amp;originWidth=1674&amp;originalType=binary&amp;ratio=1&amp;size=1052583&amp;status=done&amp;style=none&amp;taskId=u55e43d90-115a-4f84-afb9-d478132399c" data="aurora"></p><h3 id="fix复选框样式优化" tabindex="-1"><a class="header-anchor" href="#fix复选框样式优化" aria-hidden="true">#</a> fix复选框样式优化</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633670142654-c5d94d74-a63f-4869-9513-df2b2c687d47.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633670165825-85724708-59f7-4517-a6d6-e563456e9cd6.png" data="aurora"></p><h3 id="商品属性面板对应数据获取" tabindex="-1"><a class="header-anchor" href="#商品属性面板对应数据获取" aria-hidden="true">#</a> 商品属性面板对应数据获取</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633670943071-b26fa948-893c-4fb7-b11f-afa4ffa3b5f7.png" data="aurora"> 第二步：将获取到的数据保存到onlyTableData <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633701897046-52a7d15f-856c-4b45-90e8-15a86de44f93.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633701947800-d1e37998-6a1a-42da-bc7b-8561b6500d61.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633671039152-7b795fa5-d977-4ac4-ad85-1120d93ec3f0.gif#clientId=ufe7f622c-51ee-4&amp;from=ui&amp;id=ubf26e68e&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=802&amp;originWidth=620&amp;originalType=binary&amp;ratio=1&amp;size=266587&amp;status=done&amp;style=none&amp;taskId=uff1dd723-2494-47af-9ed0-5b436b02188" data="aurora"></p><h3 id="新增商品属性面板绘制" tabindex="-1"><a class="header-anchor" href="#新增商品属性面板绘制" aria-hidden="true">#</a> 新增商品属性面板绘制</h3><p>第一步：进行表单循环（和商品参数一致） <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633703321050-e983958b-7b3b-4490-82f8-049549ad9874.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633703510286-7722f711-7cb7-4f78-98c3-eb07588beb2c.gif#clientId=u4bb0e910-725a-4&amp;from=ui&amp;id=u3cde4cab&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=758&amp;originWidth=1567&amp;originalType=binary&amp;ratio=1&amp;size=1587225&amp;status=done&amp;style=none&amp;taskId=u6b444812-0f37-455e-b29d-bab032043a6" data="aurora"></p><h3 id="新增图片上传功能" tabindex="-1"><a class="header-anchor" href="#新增图片上传功能" aria-hidden="true">#</a> 新增图片上传功能</h3><p>第一步：引入Upload上传组件(element ui 给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633704674814-c93842d7-ad26-4875-850e-6afc1ad334d1.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633704731032-acec2c77-8081-4334-a9e0-154cafdce464.png" data="aurora"> 第二步：将Url写在data中，注意这个url是baseURL的根路径 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633704784476-8cf5abfd-649c-4ffb-b5d0-46e1bc8d929b.png" data="aurora"> 第三步：写方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633704806471-1ce4b1cd-37e7-4f97-a46e-00dca488a0ef.png" data="aurora"> 第四步：组件注册 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633704903268-f25e89f4-4aee-4c6c-8dba-4e98faa61484.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633705679834-13056053-7f06-4a4a-8054-1fae64d42bda.gif#clientId=u4bb0e910-725a-4&amp;from=ui&amp;id=u710fc2c7&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=485&amp;originWidth=1590&amp;originalType=binary&amp;ratio=1&amp;size=2637983&amp;status=done&amp;style=none&amp;taskId=u78208dd1-9e75-48ee-9560-23f7c342d53" data="aurora"></p><h3 id="fix上传图片不成功" tabindex="-1"><a class="header-anchor" href="#fix上传图片不成功" aria-hidden="true">#</a> fix上传图片不成功</h3><p>第一步：点击上传图片后在网络请求中可以看到是无效token，就证明发起这个请求并没有携带 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633744983863-1edb7c70-e265-48f7-a4a5-8983ab374ba6.png" data="aurora"> 第二步：Upload上传给了一个设置上传请求头部的事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633745117133-1924ff9f-50fa-4208-b386-2545424f356e.png" data="aurora"> 第三步：在el-upload中添加这个事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633745263875-ecfba2d8-7d4e-4127-8e24-bf0c8b6b9e43.png" data="aurora"> 第四步：在data中写入请求头 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633745672142-5ef9e14d-ef04-4170-b661-6366315fe81b.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633745744156-87c09b86-1de2-4ee0-9e21-6cca56559b9a.png" data="aurora"></p><h3 id="新增图片上传成功之后操作" tabindex="-1"><a class="header-anchor" href="#新增图片上传成功之后操作" aria-hidden="true">#</a> 新增图片上传成功之后操作</h3><p>第一步：Upload图片上传给出了文件上传成功时的钩子(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633756969227-46ba8f9f-c61e-4c9d-8b33-928548a743b7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633757063976-ab378818-8acd-45aa-9c03-c3680bed0d34.png" data="aurora"> 第二步：将图片信息对象push到pisc中，先创建一个接收对象 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633757266610-48a11e34-d5d1-461c-b7f8-b23acab59c8a.png" data="aurora"> 第三步：写方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633757121671-7396a423-83d1-4dce-a917-ec39627c89a8.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633757370681-9ec1ffbd-cf7d-43ae-b0a7-c24d479d7023.png" data="aurora"></p><h3 id="新增图片移除操作" tabindex="-1"><a class="header-anchor" href="#新增图片移除操作" aria-hidden="true">#</a> 新增图片移除操作</h3><p>第一步：Upload图片上传给出了文件移除时的钩子(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633790692784-9c3a2a53-bb75-48ba-a847-943047bd66ef.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633790748447-d38fa25f-3a68-41c9-b86b-8a4c91f443d1.png" data="aurora"> 第二步：处理移动图片的操作 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633792314957-6cad61f9-1f09-4e68-a634-1d806d098ff2.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633792692766-fe95b464-3322-4039-80be-3d84fbf68a82.gif#clientId=u6a9602db-085a-4&amp;from=ui&amp;id=u8edc7789&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=886&amp;originWidth=1413&amp;originalType=binary&amp;ratio=1&amp;size=9717154&amp;status=done&amp;style=none&amp;taskId=u6e4db918-885d-416b-aaf6-02b4a87ac8c" data="aurora"></p><h3 id="新增图片预览功能" tabindex="-1"><a class="header-anchor" href="#新增图片预览功能" aria-hidden="true">#</a> 新增图片预览功能</h3><p>第一步：Upload图片上传给出了文件上传时的钩子(element ui给出了方案) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833118716-4c195bd5-feca-46ef-83e6-9cb46e7e1d78.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833165485-9ed8eed9-d737-4875-9458-f472a1f85846.png" data="aurora"> 第二步：引入Dialog对话框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833314510-3ca641ab-8839-4e31-bd94-5aa810c79dd3.png" data="aurora"> 第三步：获取图片预览地址 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833431516-65a09091-cc3f-4cdc-8a55-a177e15899c3.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833356862-e10e06b7-5478-4e1f-ac57-17134a67743c.png" data="aurora"> 第四步：控制dialog对话框的显示与隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833608830-849bd11f-bf08-4c8c-8860-97dc35e420ec.png" data="aurora"> 当点击图片名称就触发 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833665343-b80b2f1c-dc58-4fbd-93e4-c84284623639.png" data="aurora"> 第五步：修改样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833709534-2a8c541c-d44e-4773-860b-d07b2eacf698.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633833721190-9b2f0032-5cf4-4bcc-921c-abc4a682366e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633833846757-4f6a574c-2cd8-4b13-aef0-10f8364c8986.gif#clientId=u492a23f3-79be-4&amp;from=ui&amp;id=u5f26f3e0&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=724&amp;originWidth=1557&amp;originalType=binary&amp;ratio=1&amp;size=2932977&amp;status=done&amp;style=none&amp;taskId=u165dc9ca-a6ab-45e7-bd0c-2b04310657a" data="aurora"></p><h3 id="新增富文本框" tabindex="-1"><a class="header-anchor" href="#新增富文本框" aria-hidden="true">#</a> 新增富文本框</h3><p>第一步：安装vue-quil-editor <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837351013-798fc259-d54b-4fbb-8a8b-54982766d238.png" data="aurora"> 第二步：man.js进行全局引用富文本编辑器 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837406233-43c23ced-e26a-44b2-a55c-48f01d2e3e24.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837419857-44d75e27-d045-47fd-85bd-10bdaff19c56.png" data="aurora"> 第三步：在Add.vue引入富文本 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837464069-10308eb1-17fa-4831-a25b-def4fc69a9a3.png" data="aurora"> 第四步：在addForm创建一个goods_introduce接收富文本内容 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837519346-54e71738-1890-4560-b94b-16f0c457ab22.png" data="aurora"> 第五步：修饰样式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837641639-2933c0c0-446b-463e-b509-3a37091299c9.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633837683840-3e75090d-8b7d-4787-b001-a1025d6e2947.png" data="aurora"></p><h3 id="新增添加商品预验证" tabindex="-1"><a class="header-anchor" href="#新增添加商品预验证" aria-hidden="true">#</a> 新增添加商品预验证</h3><p>第一步：新增添加商品按钮、click事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633853490688-8da1a6e9-d8a7-4273-af16-661b073193ef.png" data="aurora"> 第二步：写click事件方法 知识点：validate是校验表单项prop值，校验是否通过 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633853556955-7aee7fea-c4b3-49a8-82f6-28e6948535fc.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633854314606-edd1e22a-8f07-41e9-802c-da421c0464a5.gif#clientId=u492a23f3-79be-4&amp;from=ui&amp;id=ub569323a&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=861&amp;originWidth=1377&amp;originalType=binary&amp;ratio=1&amp;size=1706887&amp;status=done&amp;style=none&amp;taskId=uf5bb393a-810e-4fd3-ad76-de9ddc29556" data="aurora"></p><h3 id="添加商品前数据转换" tabindex="-1"><a class="header-anchor" href="#添加商品前数据转换" aria-hidden="true">#</a> 添加商品前数据转换</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633856696663-c2726a79-6ea6-4371-914d-ecc7ffd10bd1.png" data="aurora"> 第二步：引入深拷贝依赖库 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633856892487-fef447f0-d921-40c5-bde8-4e231ab90d9d.png" data="aurora"> 第三步：在代码中导入深拷贝库<a href="https://lodash.com/docs/4.17.15#cloneDeep" target="_blank" rel="noopener noreferrer">官方地址<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633856931622-acb3d61e-3623-46ac-ba3b-8bfcfb660cff.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633857392215-a65ac539-1755-46e3-abd6-3adc77b8a7ff.png" data="aurora"> 为什么需要进行深拷贝呢？因为在此之前级联选择器希望是数组，而另外个希望是字符串产生了分歧，所以同时满足就采用深拷贝。 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633858679236-d25fb959-9bc7-4a3c-a742-97fdb2d1de6f.gif#clientId=u492a23f3-79be-4&amp;from=ui&amp;id=u96c14949&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=861&amp;originWidth=1377&amp;originalType=binary&amp;ratio=1&amp;size=1298822&amp;status=done&amp;style=none&amp;taskId=ub8f75540-9f07-4316-941e-800dbf62614" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633858587910-dc1faaa6-30bf-40e1-bd7f-b44e70789ccc.png" data="aurora"></p><h3 id="添加商品时数据转换" tabindex="-1"><a class="header-anchor" href="#添加商品时数据转换" aria-hidden="true">#</a> 添加商品时数据转换</h3><p>第一步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633878215588-8db63d39-1fdb-4f9d-87f2-66a823f50cf5.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633878276712-8884dafd-559f-425d-8982-f070a6b8e9e9.png" data="aurora"> 第二步：新增attrs数组 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633879773082-32892760-7e79-4d39-87bd-df9a5f1e23dc.png" data="aurora"> 第三步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633879996030-15102e91-4b05-4675-a34b-23b2e356fb80.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633880106677-fad3be92-aac8-465f-ba3a-58d14a6be1d0.png" data="aurora"></p><h3 id="完善添加商品" tabindex="-1"><a class="header-anchor" href="#完善添加商品" aria-hidden="true">#</a> 完善添加商品</h3><p>第一步：查看接文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633964835652-8d1cc284-5dbb-4f51-8b97-08a6b4b38bde.png" data="aurora"> 第二步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1633964934877-480d607b-1c8d-4c64-86ac-250144fa90f9.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1633965430469-2e259401-26a5-456a-b2c5-c729cc873df8.gif#clientId=u9883131b-bf55-4&amp;from=ui&amp;id=u23523d13&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=843&amp;originWidth=1647&amp;originalType=binary&amp;ratio=1&amp;size=4672419&amp;status=done&amp;style=none&amp;taskId=u0ea603be-8a16-4cef-8772-94c38d23a57" data="aurora"></p><h2 id="新增订单管理分支" tabindex="-1"><a class="header-anchor" href="#新增订单管理分支" aria-hidden="true">#</a> 新增订单管理分支</h2><h3 id="新增订单管理骨架" tabindex="-1"><a class="header-anchor" href="#新增订单管理骨架" aria-hidden="true">#</a> 新增订单管理骨架</h3><p>第一步：需要重新创建一个分支取名为：order <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634003309134-1a4beaab-3f32-4d6c-8390-f256a1fbebf7.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634003331696-f410c3cf-0d9b-429d-95cc-b454566ff54e.png" data="aurora"> 第二步：在order目录创建Order.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634004313188-d1f6a346-136c-48e6-9b93-7e8934ec5ccb.png" data="aurora"> 第三步：写基础骨架</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
        订单管理
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>


<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">// 初始化基础数据节点</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 声明周期函数</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// 事件处理函数</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style lang<span class="token operator">=</span><span class="token string">&quot;less&quot;</span> scoped<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div><p>第四步：在路由引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634004400423-bba43a16-3c44-42d0-a161-824380f7ea95.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634004412576-164f3a1a-36dd-4fd6-9f47-c9b38f7e4b92.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634004433935-fd59d838-bdc6-423a-88cb-cfafb54e0943.png" data="aurora"></p><h3 id="增加面包屑-卡片-输入框基础页面" tabindex="-1"><a class="header-anchor" href="#增加面包屑-卡片-输入框基础页面" aria-hidden="true">#</a> 增加面包屑/卡片/输入框基础页面</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634014443019-7c9a93a1-9ce5-440d-a73f-93fbf4d50bc6.png" data="aurora"> 第二步：引入卡片 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634014502198-5c0268db-8bca-4b71-bcb2-154cf54f303c.png" data="aurora"> 第三步：引入input搜索框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634014530289-ba173e28-fd85-4350-a1f8-88fd5a17fa37.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634014546413-d47ef53d-c335-4dd0-817e-6cc1c35bb507.png" data="aurora"></p><h3 id="商品订单数据获取" tabindex="-1"><a class="header-anchor" href="#商品订单数据获取" aria-hidden="true">#</a> 商品订单数据获取</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634016412517-959748da-4d36-4ae2-b318-68fc8110445a.png" data="aurora"> 第二步：增加查询信息 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634016695093-7934baf4-f24a-4e05-b186-9f62dafab540.png" data="aurora"> 第三步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634016732026-7c31704e-cd04-4349-9e57-4a76f9ee4218.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634016903477-9c072a56-37b0-4623-9d57-c48f16036614.png" data="aurora"></p><h3 id="商品订单数据渲染" tabindex="-1"><a class="header-anchor" href="#商品订单数据渲染" aria-hidden="true">#</a> 商品订单数据渲染</h3><p>第一步：引入el-tab表格 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634052153284-1d83c61f-f386-4571-b795-ce28fc02b9ba.png" data="aurora"> 第二步： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634052292850-b24375bc-a33f-4f56-a772-aa18e9e18e11.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634052309230-e53e5cef-d0fe-4b21-b674-492b60fa7749.png" data="aurora"></p><h3 id="新增分页功能" tabindex="-1"><a class="header-anchor" href="#新增分页功能" aria-hidden="true">#</a> 新增分页功能</h3><p>第一步：引入Pagination分页 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634134718013-30c90a2e-6aa9-4d88-9707-dc8415482272.png" data="aurora"> 第二步：写对应方法 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634134927053-3a2a1761-d80c-4b9f-aab5-e64db299c48e.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634135368787-53fdd882-dda1-4403-ae6e-3322b83b89c1.gif#clientId=ue1531ac3-8484-4&amp;from=ui&amp;id=u24098109&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=811&amp;originWidth=1558&amp;originalType=binary&amp;ratio=1&amp;size=1763992&amp;status=done&amp;style=none&amp;taskId=uc9014825-41dd-4ba8-af8e-02f63be7406" data="aurora"></p><h3 id="新增省市区-县联动效果" tabindex="-1"><a class="header-anchor" href="#新增省市区-县联动效果" aria-hidden="true">#</a> 新增省市区/县联动效果</h3><p>第一步：给编辑按钮新增clikc事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138343443-a2799eff-dc23-490c-9cd1-729a374e6117.png" data="aurora"> 第二步：引入Dialog对话框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138456518-38e5a492-cb0c-42bc-99bc-c069268c4a39.png" data="aurora"> 第三步：控制默认对话框为隐藏 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138543966-c9c38e6f-1154-481e-87e9-df6cc92c6f11.png" data="aurora"> 第四步：点击编辑按钮控制对话框显示 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138588345-99ee8791-239e-4d13-a22f-81de265561f0.png" data="aurora"> 第五步：引入表单校验 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138648959-bd2c25e5-dc5e-4a66-b775-5b4e00f96b3f.png" data="aurora"> 第六步：表单校验规则 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138682898-e1337835-36b6-41f7-8d47-34c1328d8301.png" data="aurora"> 第七步：引入城市列表(citydata.js) <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138907516-d2301269-483d-492b-9665-5fe999e0dc73.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138926509-178b00a9-4e9e-4886-8933-b2257be05f06.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138950022-976a7241-9057-4151-8bfb-69b1cc32f462.png" data="aurora"> 第八步：引入级联选择器，并将城市数据绑定到opthions <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634138999395-2e2cf086-a149-4819-b1c2-7b6c2873ddc8.png" data="aurora"> 第九步：新增dialog对话框close事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634139092289-0d9f2ca0-8348-41cf-b219-59e48b9a6342.png" data="aurora"> 第十步：关闭对话框后触发清空表单事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634139123603-26640b96-ea21-468e-8b63-d2c72be21660.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634139216018-25d281ba-7778-4928-8ae8-a84ba88f9c99.gif#clientId=ue1531ac3-8484-4&amp;from=ui&amp;id=u278b7da5&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=778&amp;originWidth=1488&amp;originalType=binary&amp;ratio=1&amp;size=3697265&amp;status=done&amp;style=none&amp;taskId=u34b95c80-e6ec-45d1-b4b9-f15193ceeff" data="aurora"></p><h3 id="新增物流进度的对话框-物流进度数据获取" tabindex="-1"><a class="header-anchor" href="#新增物流进度的对话框-物流进度数据获取" aria-hidden="true">#</a> 新增物流进度的对话框/物流进度数据获取</h3><p>第一步：在定位图标新增click 事件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634187192634-e9ac1441-ad37-4c0d-9f90-b7da2868983a.png" data="aurora"> 第二步：引入Dialog对话框 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634187258242-1bbd1251-ee3c-4548-8519-ee0a623eb8aa.png" data="aurora"> 第三步：设置对话框为隐藏状态 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634187306244-ead19e9f-f3b1-4581-832e-b97d8525df1c.png" data="aurora"> 第四步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634187347510-227b0dbd-da02-446e-8a4e-b59339489a49.png" data="aurora"> 第五步：接口请求 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634187537327-c9966d56-efc7-4057-acd1-9fd3ca4bc1c8.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634187773760-4b228c08-f847-441a-99fb-4041c567110a.gif#clientId=ucf687cd7-1562-4&amp;from=ui&amp;id=uf395142d&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=789&amp;originWidth=1472&amp;originalType=binary&amp;ratio=1&amp;size=1289424&amp;status=done&amp;style=none&amp;taskId=uce67d5e8-f983-4e59-a04d-6a31c473a1f" data="aurora"></p><h3 id="新增时间线" tabindex="-1"><a class="header-anchor" href="#新增时间线" aria-hidden="true">#</a> 新增时间线</h3><p>第一步：引入时间线(element ui)给出了方案 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634220665810-6dd90ae5-3aa6-45a1-bd3c-f75df04ebd7e.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634220719447-6335d993-cd3a-4fe0-9cb2-6c7e81fb1f29.png" data="aurora"> 第二步：注册组建 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634220929820-d090e96a-cb4a-4e26-ab43-b3381e288bbb.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634221103481-4e7461f7-8c45-40ca-8816-ef59ad056e78.gif#clientId=ucf687cd7-1562-4&amp;from=ui&amp;id=u235232aa&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=750&amp;originWidth=1520&amp;originalType=binary&amp;ratio=1&amp;size=6523515&amp;status=done&amp;style=none&amp;taskId=u806dd2b0-a9ef-4455-851f-859f7fb3674" data="aurora"></p><h3 id="合并分支到master" tabindex="-1"><a class="header-anchor" href="#合并分支到master" aria-hidden="true">#</a> 合并分支到master</h3><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634221988888-cdcfb04b-f02a-49dc-a430-8346bc0e4fa6.png" data="aurora"></p><h2 id="report报告" tabindex="-1"><a class="header-anchor" href="#report报告" aria-hidden="true">#</a> Report报告</h2><h3 id="新增报表骨架" tabindex="-1"><a class="header-anchor" href="#新增报表骨架" aria-hidden="true">#</a> 新增报表骨架</h3><p>第一步：需要重新创建一个分支取名为：report <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634222251157-3f1b5d46-041a-4d48-89f8-485a2503740d.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634222322195-de752ae9-4916-44d8-a271-939903bfa456.png" data="aurora"> 第二步：在report目录创建Report.vue <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634224047527-99e015c8-97f8-4a31-9755-717d7fe1d3fd.png" data="aurora"> 第三步：写基础骨架</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token operator">&lt;</span>template<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
        报表组件
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>template<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>script<span class="token operator">&gt;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    methods<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span>style lang<span class="token operator">=</span><span class="token string">&quot;less&quot;</span> scoped<span class="token operator">&gt;</span>

<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>第四步：在路由引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634224123923-9c937db2-b2ba-4b29-9f37-cba2c4e67118.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634224146523-8de7bec6-9be1-4463-8098-b9414f1216af.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634224216335-d55611cb-9719-4615-8394-a8f1d41b8deb.png" data="aurora"></p><h3 id="添加面包屑-卡片" tabindex="-1"><a class="header-anchor" href="#添加面包屑-卡片" aria-hidden="true">#</a> 添加面包屑/卡片</h3><p>第一步：引入面包屑 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634261737823-f7200c73-08d8-48d3-9438-88299ac6f192.png" data="aurora"> 第二步：引入卡片 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634261766236-c7384fc1-9bf3-42c9-9b5b-951850fb69bf.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634261783680-19a56cde-cbf4-4cd7-b5e1-55109582cf75.png" data="aurora"></p><h3 id="引入echars图表" tabindex="-1"><a class="header-anchor" href="#引入echars图表" aria-hidden="true">#</a> 引入Echars图表</h3><p>第一步：安装Echars插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634261943591-cc2a0dcd-ebbe-47af-9582-92ab82f6f50a.png" data="aurora"> 第二步：在项目中引入Echarts 1.导入Echarts <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263439734-5fbfe14f-35d8-430e-ac5c-e90a7c805655.png" data="aurora"> 2.创建一个Dom节点 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263484645-26cb64da-cd05-4ff2-b65b-87f2d1bbc18c.png" data="aurora"> 3.创建一个mounted钩子 该钩子的作用是Dom创建完成之后才会执行，此时，页面上的元素已经渲染完毕了 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263601486-77d97831-0e99-434d-90de-1e367bafc10b.png" data="aurora"> 4.准备Echarts展示数据和配置项 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263634855-1e5ed7f1-2426-49c5-a964-38559bb4a633.png" data="aurora"> 5.在页面上展示Echarts <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263692787-db5d265c-34b9-4d8d-8a11-5acbdaf45f2f.png" data="aurora"> 效果: <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634263731661-edf1e2e5-95a8-4f87-b98c-ed31cde60cf2.png" data="aurora"></p><h3 id="数据报表渲染" tabindex="-1"><a class="header-anchor" href="#数据报表渲染" aria-hidden="true">#</a> 数据报表渲染</h3><p>第一步：查看接口文档 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634307882826-546d1c75-9bf6-4d6b-923b-6d6510a3ada0.png" data="aurora"> 第二步：请求接口 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634308186697-01599b6e-6ba7-4460-99e1-734e59131d20.png" data="aurora"> 第三步：进行数据合并 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634308228221-844caaa3-2aad-40ec-a490-0625ce2ea3e2.png" data="aurora"><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634308251819-f85dad8c-8196-40ac-a490-61a7e60960a0.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634308369131-f697e6e1-1cf0-4722-adc5-48edca419973.png" data="aurora"></p><h2 id="优化项目" tabindex="-1"><a class="header-anchor" href="#优化项目" aria-hidden="true">#</a> 优化项目</h2><h3 id="新增顶部加载进度条" tabindex="-1"><a class="header-anchor" href="#新增顶部加载进度条" aria-hidden="true">#</a> 新增顶部加载进度条</h3><p>第一步：下载nprogress插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634311060842-89484d55-382b-45ab-9ca4-c35325ee1691.png" data="aurora"> 第二步：在main.js导入nprogress <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634440102207-b6e87e80-cad0-4cc6-a0cc-50a1f6a0e1cd.png" data="aurora"> 第三步：在发起axios请求前调用Nprogress.start() <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634440297722-d1c9f7b5-1b52-4a05-93a5-198f0ee9c496.png" data="aurora"> 第四步：在发起axios请求后调用Nprogress.done() <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634440500688-371db7f7-a352-438f-b1aa-2112444bad5f.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634440656159-5046d172-8cf8-471b-903b-7500a934177f.gif#clientId=u6c68a3f6-9f30-4&amp;from=ui&amp;id=uc015abc7&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=605&amp;originWidth=1789&amp;originalType=binary&amp;ratio=1&amp;size=725822&amp;status=done&amp;style=none&amp;taskId=ua5172e51-680b-4cf9-9ce0-ee7b61847d9" data="aurora"></p><h3 id="安装生产环境禁止console-打印" tabindex="-1"><a class="header-anchor" href="#安装生产环境禁止console-打印" aria-hidden="true">#</a> 安装生产环境禁止console.*打印</h3><p>第一步：在开发依赖下载对应插件<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634521604587-658b9ed1-c6b6-4a40-a86e-7fb27c326f07.png" data="aurora"> 第二步：在build过程中，新增该插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634521952855-bd7d1349-6583-461d-9a6b-0c5a4353d14c.png" data="aurora"></p><h3 id="关于插件在生产环境禁止console-log-输出" tabindex="-1"><a class="header-anchor" href="#关于插件在生产环境禁止console-log-输出" aria-hidden="true">#</a> 关于插件在生产环境禁止console.log()输出</h3><p>第一步：下载插件【babel-plugin-transform-remove-console】 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634607251446-f54d4ec0-cedb-4cf4-8769-3377597133a6.png" data="aurora"> 第二步：在根目录可以看到<strong>babel.config.js</strong>这个文件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634607307085-1fb7e754-73a2-4c28-ad91-75ef234d2b36.png" data="aurora"> 第三步：进行判断为什么环境，如果为生产环境，则使用这个插件，非正式环境则不使用这个插件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634607432998-00f37597-436b-4295-b7e9-a27d020c1472.png" data="aurora"> 效果：现在在开发环境，所以可以正常打印console.log <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="1.gif" originSrc="https://cdn.nlark.com/yuque/0/2021/gif/21384865/1634607892766-1f8d2381-62ff-4c42-8a0d-e453c4d05f31.gif#clientId=ua13ecbc5-871a-4&amp;from=ui&amp;id=u337dbd85&amp;margin=%5Bobject%20Object%5D&amp;name=1.gif&amp;originHeight=841&amp;originWidth=1832&amp;originalType=binary&amp;ratio=1&amp;size=1843268&amp;status=done&amp;style=none&amp;taskId=u769b511a-18b5-480a-af89-3fe9865d1da" data="aurora"></p><h3 id="项目生产打包报告" tabindex="-1"><a class="header-anchor" href="#项目生产打包报告" aria-hidden="true">#</a> 项目生产打包报告</h3><ul><li>生成打包报告</li></ul><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// 通过 vue-cli 的命令选项可以生成打包报告</span>
<span class="token comment">// --report 选项可以生成 report.html 以帮助分析包内容</span>
vue<span class="token operator">-</span>cli<span class="token operator">-</span>service build <span class="token operator">--</span>report
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ul><li>通过可视化的UI面板直接查看报告</li></ul><p>在可视化UI面板中，通过控制台和分析面板，可以方便看到项目中所存在的问题 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634566814644-1757ed2e-3d2c-4342-8de4-932cbbca962e.png" data="aurora"></p><h3 id="修改webpack默认配置" tabindex="-1"><a class="header-anchor" href="#修改webpack默认配置" aria-hidden="true">#</a> 修改webpack默认配置</h3><p>第一步：在根目录创建vue.config.js这个配置文件 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634567154503-297a0434-fb53-4e4a-9c06-4ee4d96bb6fa.png" data="aurora"> 第二步：固定写法</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token comment">// vue.config.js</span>
<span class="token comment">// 这个文件中，应该导出一个包含了自定义配置选项的对象</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// 选项...</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="chainwebpack-自定义打包入口" tabindex="-1"><a class="header-anchor" href="#chainwebpack-自定义打包入口" aria-hidden="true">#</a> chainWebpack 自定义打包入口</h3><ul><li>新增一个自己的打包入口文件</li></ul><p>第一步：将原来main.js修改成dev和prod模式 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634571279767-56db3616-0ad3-4a82-b8d4-71b343e7d16b.png" data="aurora"> 第二步：定义打包入口<img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634607082368-d6f97273-c06b-41f2-bda2-2920b8266e7b.png" data="aurora"></p><h3 id="通过-externals-加载外部cdn资源" tabindex="-1"><a class="header-anchor" href="#通过-externals-加载外部cdn资源" aria-hidden="true">#</a> 通过 externals 加载外部CDN资源</h3><blockquote><p>默认情况下，通过import语法导入第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单个文件体积过大的问题。</p></blockquote><p>第一步：配置externals <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634639443617-c7d2e24a-b385-4f5f-9fb5-0cf919a775e1.png" data="aurora"> 第二步：删除在main.js引入的资源，进行 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634639518955-3d3c565c-57b1-4cd2-a9fe-e0dda486bd84.png" data="aurora"> 第三步：在public文件夹下找到index.html <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634639717810-947bfa8a-08d8-4198-a7dd-c6933f8e065a.png" data="aurora"> 效果：编译后体积明显变小 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634639815713-218780b4-d30f-4f17-af2b-aed202d81e12.png" data="aurora"></p><h3 id="通过cdn优化elementui的打包" tabindex="-1"><a class="header-anchor" href="#通过cdn优化elementui的打包" aria-hidden="true">#</a> 通过CDN优化ElementUI的打包</h3><ul><li>在main-prod.js中，注释掉element-ui按需加载的代码</li></ul><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634654947282-79ee577b-d590-4249-80f3-c45b6d286b32.png" data="aurora"></p><ul><li>在index.html的头部区域中，通过CDN加载element-ui的js和css样式</li></ul><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634654983924-b8aefb89-7ccc-4a63-8e53-5eb3f244295c.png" data="aurora"> 效果：编译后体积明显变小 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634655044803-f010db19-1e7a-4a41-bba9-4a6cd97862d1.png" data="aurora"></p><h3 id="首页内容定制" tabindex="-1"><a class="header-anchor" href="#首页内容定制" aria-hidden="true">#</a> 首页内容定制</h3><blockquote><p>在public/index.html首页中，可以根据isProd的值，来决定如何渲染页面结构</p></blockquote><p>第一步：在vue.config.js中增加一个自定义属性</p><div class="language-javascript ext-js line-numbers-mode"><pre class="language-javascript"><code><span class="token function-variable function">chainWebpack</span><span class="token operator">:</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 发布模式默认打包入口</span>
    config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">&#39;production&#39;</span><span class="token punctuation">,</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// html插件新增一个自定义属性</span>
    	config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">&#39;html&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">true</span>
        <span class="token keyword">return</span> args
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token comment">// 开发模式默认打包入口</span>
    config<span class="token punctuation">.</span><span class="token function">when</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">&#39;production&#39;</span><span class="token punctuation">,</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      config<span class="token punctuation">.</span><span class="token function">plugin</span><span class="token punctuation">(</span><span class="token string">&#39;html&#39;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">tap</span><span class="token punctuation">(</span><span class="token parameter">args</span> <span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        args<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>isProd <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token keyword">return</span> args
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>第二步：在index.html中进行判断 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634658420667-82ee07ad-3513-4fd3-8e34-c4922c1141b1.png" data="aurora"> 效果：编译后体积明显变小 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634658486148-789ad28f-6fcd-4df3-9801-ccbd9f3990c3.png" data="aurora"></p><h3 id="路由的懒加载" tabindex="-1"><a class="header-anchor" href="#路由的懒加载" aria-hidden="true">#</a> 路由的懒加载</h3><blockquote><p>不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件</p></blockquote><ol><li>安装@babel/plugin-syntax-dynamic-import包</li></ol><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634694152573-dd49e693-c774-4718-aa39-37a2f367f5a9.png" data="aurora"></p><ol start="2"><li>在babel.config.js配置文件中声明该插件</li></ol><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634694280169-534eef76-0cbf-4d1c-9387-e96ea10395d1.png" data="aurora"></p><ol start="3"><li>将路由改为按需加载的形式</li></ol><p><img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634695114567-45b62bf4-c2eb-4086-850f-5e6e1bd017bd.png" data="aurora"> 效果： <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1634695132649-c458d726-0df3-4a8e-8833-da3ee71f0ad7.png" data="aurora"></p><h3 id="项目上线" tabindex="-1"><a class="header-anchor" href="#项目上线" aria-hidden="true">#</a> 项目上线</h3><hr><h1 id="导入阿里icon到自己项目" tabindex="-1"><a class="header-anchor" href="#导入阿里icon到自己项目" aria-hidden="true">#</a> 导入阿里icon到自己项目</h1><p>第一步：首先去<a href="https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2" target="_blank" rel="noopener noreferrer">网站<span><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><!--[--><span class="sr-only">open in new window</span><!--]--></span></a>进行注册并选好需要的图标下载到本地 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630855983976-ecbbf08c-06f1-4ccb-b024-35c2bea6920c.png" data="aurora"> 第二步：将这个目录放在src/assets里 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630856057902-49441435-5687-4cba-8481-949d777f0b17.png" data="aurora"> 第三步：去main.js进行引入 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630856109874-95c3bd9c-9453-40af-9e64-d02bea7c2320.png" data="aurora"> 第四步：使用图标 <img src="https://ooszy.cco.vin/img/blog-public/ljz.gif" alt="image.png" originSrc="https://cdn.nlark.com/yuque/0/2021/png/21384865/1630856216304-e453170b-fd31-425e-8c6f-57a2601bef21.png" data="aurora"></p><h1 id="git使用大全" tabindex="-1"><a class="header-anchor" href="#git使用大全" aria-hidden="true">#</a> git使用大全</h1><h2 id="创建子分支" tabindex="-1"><a class="header-anchor" href="#创建子分支" aria-hidden="true">#</a> 创建子分支</h2><p>git checkout -b 分支名字</p><h2 id="查看当前所有分支" tabindex="-1"><a class="header-anchor" href="#查看当前所有分支" aria-hidden="true">#</a> 查看当前所有分支</h2><p>git branch</p><h2 id="将代码添加到暂存区" tabindex="-1"><a class="header-anchor" href="#将代码添加到暂存区" aria-hidden="true">#</a> 将代码添加到暂存区</h2><p>git add .</p><h2 id="查看上次提交之后是否有进行再次修改" tabindex="-1"><a class="header-anchor" href="#查看上次提交之后是否有进行再次修改" aria-hidden="true">#</a> 查看上次提交之后是否有进行再次修改</h2><p>git status</p><h2 id="提交代码" tabindex="-1"><a class="header-anchor" href="#提交代码" aria-hidden="true">#</a> 提交代码</h2><p>git commit -m &quot;备注&quot;</p><h2 id="切换主分支" tabindex="-1"><a class="header-anchor" href="#切换主分支" aria-hidden="true">#</a> 切换主分支</h2><p>git checkout master</p><h2 id="合并代码" tabindex="-1"><a class="header-anchor" href="#合并代码" aria-hidden="true">#</a> 合并代码</h2><p>git merge 分支</p><h2 id="推送到代码管理仓库-码云-github" tabindex="-1"><a class="header-anchor" href="#推送到代码管理仓库-码云-github" aria-hidden="true">#</a> 推送到代码管理仓库(码云/github)</h2><p>git push -u origin 仓库名(-u 是没有将分支推送到仓库的操作) git push</p><h1 id="目录结构" tabindex="-1"><a class="header-anchor" href="#目录结构" aria-hidden="true">#</a> 目录结构</h1><p>todo：有空就写</p><!--]--></div><footer class="page-meta"><div class="meta-item edit-link"><!--[--><span class="aurora-nav-font aurora-navbar-icon"></span><a class="nav-link external nav-link-active meta-item-label" href="https://github.com/ranyong1997/sakura-docs/edit/main/docs/Front-end/Vue项目实战.md" rel="noopener noreferrer" target="_blank" aria-label="编辑"><!--[--><!--]--> 编辑<!--[--><!--]--></a><!--]--></div><div class="meta-item last-updated"><span class="meta-item-label">lastTime: </span><span class="meta-item-info">2021/11/30 上午10:25:57</span></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 1311518086@qq.com">冉勇</span><!----><!--]--><!--]--></span></div></footer><!--[--><!--]--></main><main style="--borderRadius:10px;--opacity:1;" class="page box"><div class="theme-default-content"><!--[--><div style="--homePageImgApi:url(https://api.ixiaowai.cn/api/api.php?time=-94909.6);" class="page-bottom-next"><div class="page-next-left page-next-item"><a aria-current="page" href="/Front-end/Vue%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98.html" class="router-link-active router-link-exact-active"><span></span></a></div><!----></div><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--></div></main><div><!----></div><div class="recommend-page"><main style="--borderRadius:10px;--opacity:1;" class="page box"><h2 id="recommend-top-title">推荐阅读</h2><div id="recommend" class="recommend"><!--[--><!--]--></div></main></div><div id="control-comment" class="aurora-control-comment-box"><div style="--borderRadius: 10px;--opacity: 1;" class="theme-comment-box"><span class="aurora-comment-common aurora-iconfont-common page-comment-icon"></span><span class="aurora-comment-common aurora-comment-text">点击评论</span></div><div class="mobile-record aurora-comment-animate"><div class="page box" style="--borderRadius: 10px;--opacity: 1;"><div id="waline" class="vcomment-bottom theme-default-content"></div></div></div></div><!--]--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--></div><div id="page-sidebar-right" style="" class="page-sidebar-right"><div class="stickSidebar"><!--[--><div class="sidebar-cqy"></div><div style="--borderRadius: 10px;--opacity: 1;" id="stickSidebar" class="sidebar-single-enter-animate"><div class="sidebarScroll home-sidebar" style="" id="home-sidebar"><div id="" class="sidebar-single-common"><div class="home-sidebar-avatar"><img id="home-sidebar-avatar-img" src="https://gitee.com/ran_yong/mark-down-table-upload/raw/master/img/20211123222242.png" alt=""></div><div class="home-sidebar-info-desc"><span>Sakura</span></div><div class="home-sidebar-info-page"><div class="sidebar-page-common"><div>文章</div><div>19</div></div><div class="sidebar-page-common"><div>标签</div><div>24</div></div><div class="sidebar-page-common"><div>类别</div><div>4</div></div></div><a target="_blank" href="https://github.com/ranyong1997/sakura-docs"><div class="sidebar-github">Github</div></a><!--[--><!--]--></div><!--[--><!--]--><!----><!--[--><!--]--><div id="" class="sidebar-single-common"><div class="sidebar-link"><!--[--><!--]--></div></div><!----><!--[--><!--]--><!----><!--[--><!--]--><div id="" class="sidebar-single-enter-animate sidebar-single-page sidebar-single-common"><div class="change-page"><div class="catalog-page change-page-common"><span class="changePageActive" index="1">文章目录</span></div><div style="" class="latest-page change-page-common"><!----><span style="" class="" index="2">最新文章</span></div></div><div class="" style=""><!--[--><!--]--></div><div style="display:none;"><!--[--><!--]--></div><!--[--><!--]--></div><!--[--><!--]--><div id="" class="sidebar-single-enter-animate sidebar-single-common"><div class="sidebar-page"><span class="aurora-iconfont-common aurora-sidebar-message"></span><span>公告</span></div><div class="sidebar-message"><!--[--><li id="sidebar-message" class="sidebar-hover-bg-common"><span>这是一个公告<a href="#">Sakura</a></span></li><li id="sidebar-message" class="sidebar-hover-bg-common"><span>祝大家学业进步</span></li><!--]--></div><!--[--><!--]--></div><!--[--><!--]--><div id="" class="sidebar-single-enter-animate sidebar-single-common"><div id="home-tag-sidebar" class="sidebar-page"><span class="aurora-iconfont-common aurora-sidebar-tag"></span><span>标签</span></div><!----><div class="sidebar-tag-item"><!--[--><a href="/tag?tag=Python" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #ded9e2; font-size: 31px;">Python</span></div></a><a href="/tag?tag=后端" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #42a5f5; font-size: 34px;">后端</span></div></a><a href="/tag?tag=接口" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #6d45bb; font-size: 13px;">接口</span></div></a><a href="/tag?tag=Go" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #5fa8d3; font-size: 13px;">Go</span></div></a><a href="/tag?tag=数据库" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #84c7d0; font-size: 32px;">数据库</span></div></a><a href="/tag?tag=SQL" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #fcf6bd; font-size: 32px;">SQL</span></div></a><a href="/tag?tag=Python基础" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b892ef; font-size: 13px;">Python基础</span></div></a><a href="/tag?tag=前端三剑客" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #ffcad4; font-size: 12px;">前端三剑客</span></div></a><a href="/tag?tag=JavaScript" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #90f1ef; font-size: 14px;">JavaScript</span></div></a><a href="/tag?tag=TypeScript" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b892ef; font-size: 20px;">TypeScript</span></div></a><a href="/tag?tag=Vue" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #ded9e2; font-size: 11px;">Vue</span></div></a><a href="/tag?tag=Element UI" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #42bfdd; font-size: 31px;">Element UI</span></div></a><a href="/tag?tag=Axios" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b39ddb; font-size: 18px;">Axios</span></div></a><a href="/tag?tag=Scrcpy" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b388ff; font-size: 32px;">Scrcpy</span></div></a><a href="/tag?tag=投屏软件" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #ffcad4; font-size: 17px;">投屏软件</span></div></a><a href="/tag?tag=宝塔面板" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #5fa8d3; font-size: 31px;">宝塔面板</span></div></a><a href="/tag?tag=同步代码" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #42bfdd; font-size: 11px;">同步代码</span></div></a><a href="/tag?tag=Node" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #fbc4ab; font-size: 18px;">Node</span></div></a><a href="/tag?tag=持续运行" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #0fa3b1; font-size: 25px;">持续运行</span></div></a><a href="/tag?tag=HTTPS" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b8f2e6; font-size: 16px;">HTTPS</span></div></a><a href="/tag?tag=SSL" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #b5e2fa; font-size: 33px;">SSL</span></div></a><a href="/tag?tag=Github" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #6d45bb; font-size: 12px;">Github</span></div></a><a href="/tag?tag=Gitee" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #ff9800; font-size: 15px;">Gitee</span></div></a><a href="/tag?tag=公钥" class=""><div class="sidebar-tag-single"><span class="home-sidebar-tag-hover" style="color: #8093f1; font-size: 32px;">公钥</span></div></a><!--]--></div><!--[--><!--]--></div><!--[--><!--]--><!----><!--[--><!--]--></div></div><!--]--></div></div></div></div></div><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><!--[--><!--]--><div style="--borderRadius:10px;--opacity:1;--fontColor:#2c3e50;--fontFamily:-apple-system;--fitter-blue:1px;" class="sidebar-single-enter-animate footer-layout-center" data-v-4c868354><div class="footer box" id="footer" data-v-4c868354><!--[--><div class="footer-item" id="footer-item" data-v-4c868354><span>Copyright © by sakura All Rights Reserved.</span></div><div class="footer-item" id="footer-item" data-v-4c868354><span><a target='_blank' href='#' style='display:inline-block;text-decoration:none;height:20px;line-height:20px;'><img src='' style='float:left;'/><p style='float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;'>💗</p></a></span></div><!--]--><div class="footer-item" id="footer-item" data-v-4c868354><span data-v-4c868354>小破站已运行207天22小时36分2秒</span></div></div></div></div><div id="set-bg" class="set-bg-fitter" style="--opacity: 1; --borderRadius: 10px; --backgroundImageUrl: url()"></div><div id="posterShade" class=""><span class=""></span></div></div><!----><!--]--><!----><div class="no-aurora-music-box aurora-music-box"><div class="music-box"><div class="no-show-more-song music-more"><!--[--><div class="aurora-music-more-single"><span class="aurora-music-song-active aurora-music-font aurora-music-music1 aurora-music-song-info aurora-music-cursor aurora-music-song">SAKURA</span></div><!--]--></div><div class="music-player"><div class="aurora-music-pic-par"><div class="aurora-music-pic" id="aurora-music-pic"><div class="aurora-music-pause"><span class="aurora-music-bofang4 aurora-music-font aurora-music-control-pause aurora-music-cursor"></span></div><img src="/sakura.png" alt=""></div></div><div class="aurora-music-info"><div class="aurora-music-info-left"></div><div class="aurora-music-info-right"><div class="aurora-music-title aurora-music-info-common"><span class="aurora-music-font aurora-music-music1 aurora-music-song-info aurora-music-cursor aurora-music-song">SAKURA</span></div><div class="aurora-music-bottom aurora-music-info-common"><div class="aurora-music-operate"><div><span class="aurora-music-font aurora-music-shangyishou1 aurora-music-cursor"></span></div></div><div class="aurora-music-operate"><div><span class="aurora-music-font aurora-music-xiayishou2 aurora-music-cursor"></span></div></div><div class="aurora-music-operate"><div><span class="aurora-music-geshunxubofang aurora-music-font aurora-music-cursor"></span></div></div><div class="aurora-music-operate"><div><span class="aurora-music-font aurora-music-gengduotianchong aurora-music-cursor aurora-music-operate-more"></span></div></div></div></div></div></div></div><audio autoplay class="aurora-music-player-control" controls="controls"><source src="musicSrc" type="audio/mp3"> Your browser does not support this audio format. </audio></div><div class="aurora-bubble" style="--aurora-bubble-z-index:-2;" data-v-267f56da><div class="aurora-bubble-box" id="aurora-bubble-box" data-v-267f56da></div><canvas class="aurora-bubble-canvas" id="aurora-bubble-canvas" data-v-267f56da></canvas></div><!--]--></div>
    <script src="/assets/js/runtime~app.5b846f34.js" defer></script><script src="/assets/js/452.9ec739fe.js" defer></script><script src="/assets/js/app.05eaf2e4.js" defer></script>
  </body>
</html>
